Triangle
Set the height and width of the DOM to 0 pixels, and draw different triangles by setting the color of the border to be transparent. Of course, you can also set the width of the border to draw triangles with different angles.
.container{
width: 0;
height: 0;
border: 50px solid;
border-color:red transparent transparent transparent;
}
Arrow
Use the border and rotate
or the arrow is actually 2 triangles, and then cover the blue triangle with a white triangle, and staggered by 1px, just forming an arrow, and then rotate to get arrows pointing in all directions
/**css*/
.top{
position: absolute;
}
.top:before,.top:after{
position: absolute;
content: '';
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px #fff solid;
}
.top:before{
border-bottom: 10px #0099CC solid;
}
.top:after{
top: 1px; /*覆盖并错开1px*/
border-bottom: 10px #fff solid;
}
// transform:rotate(90deg) 上箭头
/**html*/
<i class="top" >