CSS利用伪类+border做三角形

前言

之前看完就忘了，到写的时候到处搜，赶快记下来吧！

内容

• 主要利用了伪类和border属性，将宽高设为0，在用border设置三角形的大小，以后的自己，具体看代码吧，哈哈。

代码部分

//html部分

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

//css部分

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background: tomato;
}
.box::before{
    width: 0;
    height: 0;
    content: '';
    border-top: 20px solid tomato;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid transparent;
    position: absolute;
    left: 30px;
    top: 100px;   
}

这是一个箭头向下的框，利用border做出三角形，top，left，right，bootom控制方法。

后记

简单的记下来一个小demo，哈哈哈