如何通过css画各种图形

不同理解的边框

当我们正常设置宽高和边框可以看到正方形是由四个梯形和中间一个正方形组合成

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

.box {
        width: 100px;
        height: 100px;
        background-color: bisque;
        border: 50px solid;
        border-color: green red blue orange;
        margin: 0 auto;
    }

当我们把宽高去掉，中间的正方形去除时图形的变化

.box {
        width: 0;
        height: 0;
        border: 50px solid;
        border-color: green red blue orange;
        margin: 0 auto;
    }

 

 当我们其中三个边框的颜色为透明色，剩下的就为一个三角形

.box {
        width: 0;
        height: 0;
        border: 50px solid;
        border-color: transparent transparent blue transparent;
        margin: 0 auto;
    }

 

 虽然画出来的是三角形，但其他三个透明色的三角形也占着部分高度

去其他地方的高度，剩下的高度就为三角形的高度

.box {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 50px;
        border-color: transparent transparent blue transparent;
    }

画一个箭头，通过二个三角形重叠，小的那个三角形为透明色，剩下的图形就为箭头

.box {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent blue transparent;
    position: relative;
}
    
.box::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent white transparent;
    z-index: 9;
    position: absolute;
    top: 10px;
    left: -40px;
}