详情小三角css,CSS实现对话框小三角效果

效果图

应用场景

一般在模拟对话框类UI时使用

实现思路

利用伪类实现添加小三角

用border制作小三角，小三角宽高为0，设置4个边的边框宽度及颜色来实现

边框的实现是利用两种颜色的小三角叠加实现，两个三角的位移决定小三角边框宽度

代码

.dialog{

width: 200px;

height: 100px;

border: 1px solid #ccc;

margin : 50px auto;

position: relative;

}

.triangle:before{

content: '';

border-right: 20px solid #ccc;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 0;

position: absolute;

left: 0;

top: 50%;

margin-left: -20px;

margin-top: -20px;

}

.triangle:after{

content: '';

border-right: 20px solid #fff;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 0;

position: absolute;

left: 0;

top: 50%;

margin-left: -19px;

margin-top: -20px;

}