纯css绘制三角形

有时候UI没有给到类似上面的三角形图，问他要又很麻烦，所以干脆自己利用css的border属性来实现，通过设置其中一个方向的border有颜色其他为透明色来实现，需要注意的是必须设置width和height为0

// css 部分
.up{
        width:0;
        height:0;
        border-bottom:100px solid pink;
        border-left:100px solid red;
        border-right:100px solid blue;
        border-top:100px solid yellow;
      }

<div class="up"></div>

效果图如下：

然后如果想要设置向上的三角形，可以设置border-right、border-left、border-top的颜色为transparent（透明）

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

//简写
.up{
        width:0;
        height:0;
        border:100px solid transparent;
        border-bottom-color:pink;
      }

效果如下：

另外如果想要实现类似聊天框的箭头

方法：弄一个小的正方形框框，然后通过旋转，并设置和大大的框框一样的颜色便可

// css部分
.box{
    width:200px;
    height:50px;
    background-color: pink;
    border-radius: 5px;
    position: relative;
  }
.triangle{
    position:absolute;
    width:10px;
    height:10px;
    background:pink;
    top:50%;
    right:-5px;
    margin-top: -5px;
    transform: rotate(45deg);
  }

<div class="box"><div class="triangle"></div></div>

效果图如下：