CSS实现各种有趣形状

.ti {
        width: 40px;
        height: 100px;
        border: 50px solid red;
        border-color: transparent transparent red transparent;
    }

1、 梯形原理是设置一个较粗的边框，将上 右 左 设置为透明，将下边颜色填充即可实现
.yuan {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: orange;
}

2、 这个简单 border-radius 宽高的一半即可实现
.tuoyuan {
width: 200px;
height: 100px;
background-color: darkblue;
border-radius: 50%;
}

3、椭圆原理是宽是高的一半，或反之也行，形状一样，就是会调一个身位，感兴趣可以试试
.banyuan {
width: 50px;
height: 100px;
background-color: darkcyan;
border-radius: 50px 0 0 50px;
}

/*4、 半圆原理是半径的 一半数值 */
.muye {
width: 100px;
height: 66px;
background-color: red;
border-radius: 50px 0;
}

/*5、 根据半圆玩出来的，树叶飞舞之处,火亦生生不息 */
.lingxing {
width: 100px;
height: 100px;
background-color: springgreen;
transform: rotateZ(45deg);
}

/*6、 菱形，不算太尖，但也能用用 */
.xin {
margin: 50px;
width: 100px;
height: 100px;
transform: rotateZ(45deg);
background: red;
}

    .xin::after,
    .xin::before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        background: red;
        position: absolute;
        top: -50%;
        left: 0;
    }
    
    .xin::before {
        top: 0;
        left: -50%;
    }

/* 7、心形由两个圆形和一个矩形进行组合得到的。 我写的最掉头发的一个形状 */