CSS实现三角形

1.三角形

通过设置宽和高为0，改变 border-color 属性即可实现三角形效果。

div{width: 0px;height: 0px;border: 30px solid;border-color:pink transparent transparent transparent;}

三角形.png

2.三角箭头

在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。

 .exercise{
          position: relative;
           height: 0px;
           width: 0px;
           border-top: 90px solid transparent;
           border-right: 100px solid pink;
           border-bottom: 100px solid transparent;
           }
.exercise:after{
    content: '';
    position: absolute;
    top: -89px;
    left: 2px;
    border-top: 89px solid transparent;
    border-right: 99px solid #FFFFFF;
    border-bottom: 99px solid transparent;

三角箭头.png