用css伪类制作三角形的三种方法

在手机上写三角形的时候，我一般都用伪类，刚开始的时候用的图片，但是在现在的手机高清屏幕上，图片容易失真，还是用伪类吧！

 .next的position都要是relation

第一种：一个90度的“ > ”,　　只有线条。（可以做下拉框的箭头之类的） 例如： 

.next:after
{
content: "";
width: 6px;
height: 6px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
position: absolute;
right: 9px;
top: 20px;
}

如果需要背景的话，可以加background-color，这样可以让图标覆盖下面的颜色。

第二种：带颜色的。例如：

.next:after
{

position: absolute;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
content: " ";
display: block;
width: 0;
height: 0;
top: -8px;
left: 20px;

}

 

第三种：线条+颜色。原理，用两个不同颜色的伪类重叠。

例如：

.pos_rel {
position: relative;
_line-height: 0;
}

.pos_rel .icon1 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #1c7ecf transparent transparent;
border-style: solid;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}

.pos_rel .icon2 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
position: absolute;
left: 4px;
top: -9px;
width: 0;
height: 0;
}