CSS绘正方形、梯形、圆形、椭圆、三角形、扇形、箭头

正方形

<div class="square"></div>

.square{
    width: 100px;
    height: 100px;
    background-color:yellow
}

梯形

<div class="trapezoid"></div>

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

圆形

<div class="circle"></div>

.circle{
    width: 100px;
    height:100px;
    border-radius: 50%;
    background-color: yellow;
}

椭圆

<div class="oval"></div>

.oval{
    width: 100px;
    height: 50px;
    border-radius: 50%;
    background-color:yellow;
}

三角形

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

.triangle{
    width: 0px;
    height: 0px;
    border:100px solid transparent;
    border-bottom: 100px solid yellow;
}

扇形

<div class="sector"></div>

.sector{
    border:100px solid transparent;
    border-radius: 100px;
    border-top-color: yellow;
    width: 0;
}

箭头

<div class="arrow"></div>

.arrow{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent #0f0 transparent transparent;
    position: relative;
}
.arrow::after{
    content: '';
    position: absolute;
    right: -55px;
    top: -50px;
    border: 50px solid;
    border-color: transparent #fff transparent transparent;
}

实现原理：利用两个三角形重叠