Three ways to make triangles with CSS pseudo-class

On the phone when writing a triangle, I generally use pseudo-class, just the beginning of the use of the picture, but in the current cell phone HD screen, the picture is easy to distort, or use pseudo-class bar!

The first kind: a 90-degree ">" with only lines. (You can do the arrow of a drop-down box, etc.) for example:

. 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;
}

The second type: colored. For example:

. 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;

}

The third type: line + color. Principle, overlapping with two pseudo-classes of different colors.

For example:

. 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;
}

Three ways to make triangles with CSS pseudo-class