Css3 border-radius 实现圆弧三角形_圆弧正三角形

一、原理:

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

posted @ 2022-07-23 09:22  天马3798  阅读(1164)  评论(0编辑  收藏  举报