一、原理：

border-radius 可以设置4个叫，8个切边的长度，控制圆角大小；

实现方案如下：

左上角、左下角小一点。

右上角、右下角：x轴80%；y轴50%。

二、实现圆角梯形

.block{
    width: 100px;
    height: 100px;
    background-color: red;
    border-top-left-radius: 20px 20px;
    border-bottom-left-radius: 20px 20px;
    border-top-right-radius: 80px 40px;
    border-bottom-right-radius: 80px 40px;
}

三、圆角三角形、圆角正三角形

方案1：

.block{
    width: 100px;
    height: 100px;
    background-color: red;
    border-top-left-radius: 20px 20px;
    border-bottom-left-radius: 20px 20px;
    border-top-right-radius: 80px 50px;
    border-bottom-right-radius: 80px 50px;
}

方案2

.block{
    width: 100px;
    height: 100px;
    background-color: red;
    border-top-left-radius: 20px 30px;
    border-bottom-left-radius: 20px 30px;
    border-top-right-radius: 80px 50px;
    border-bottom-right-radius: 80px 50px;
}

更多参考：

border-radius 详解_border-radius使用详解1

border-radius实例1

border-radius实例2

标签：Css3,right,bottom,100px,正三角形,radius,圆弧,20px,border
来源： https://www.cnblogs.com/tianma3798/p/16510557.html