用css实现一个三角形、箭头等

三角形

最简单的一种方式

        .san{
            width: 0;
            height: 0;
            border-top: 100px transparent solid;
            border-left: 100px transparent solid;
            border-right: 100px transparent solid;
            border-bottom: 100px yellow solid;
        }

效果如下

上图是等腰三角形，要是想实现一个等边三角形呢？

空心三角形

先画一个三角形，在再中间画一个白色三角形，通过定位重叠达到空心效果

.border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
  }
  .border:after {
     content: '';
     border-style: solid;
     border-width: 0 30px 30px;
     border-color: transparent transparent #fff;
     position: absolute;
     top: 11px;
     left: -30px;
  }

箭头

  .arrow {
    width: 50px;
    height: 50px;
    border-top: 5px solid #ccc;
    border-left: 5px solid #ccc;
    transform: rotate(45deg)
  }