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