html中展开的小箭头,纯css实现各种方向小箭头

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

梯形

Document

.arrow {

width: 10px;

height: 10px;

border: 10px solid #000;

border-left-color:red;

}

2.把高宽设为0，其他边为透明颜色，三角形出来了

Document

.arrow {

width: 0;

height: 0;

border: 10px solid #000;

border-left-color:red;

}

3.在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。

Document

.arrow{

position: relative;

width: 100px;

height: 40px;

background-color: #000000;

}

.arrow::after {

width: 0;

height: 0;

border: 10px solid transparent;

border-left-color:red;

content:'';

position: absolute;

left: 100px;

top: 10px;

}

4.现在追求平面化设计，还有另一种三角线箭头，更受欢迎。

设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好

Document

.arrow{

position: relative;

}

.arrow::after,

.arrow::before {

width: 0;

height: 0;

border: 10px solid transparent;

border-left-color: red;

position: absolute;

content: "";

}

.arrow::before {

top: 0;

left: 73px;

border-left-color: blue;

}

.arrow::after {

top: 0;

left: 70px;

border-left-color: #ffffff;

}