.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;
}
第二种:带颜色的。例如:.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;
}