css实现各种形状

实现一个等腰梯形：
<div class="test"></div>

.test {
        display: inline-block;
        transform: perspective(100px) rotateX(40deg);
        width: 100px;
        height: 40px;
        background-color: #ff6767;
        z-index: 1;
}

主要核心css样式是： transform: perspective(100px) rotateX(40deg);
perspective 属性定义 3D 元素距视图的距离，以像素计。此属性允许您更改查看 3D 元素的视角。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

配合x轴旋转角度就能实现视觉上的等腰梯形。
实现效果如图：

实现一个半圆：

div {
  background-color: red;
  width: 100px;
  height: 50px;
  border-radius: 0px 0px 100px 100px;
}