css实现倾斜按钮

Mr.A.D.0013

已于 2022-11-06 22:52:44 修改

阅读量822

点赞数 1

文章标签： css ui 前端

于 2022-11-06 22:51:09 首次发布

本文链接：https://blog.youkuaiyun.com/Bannerparter/article/details/127722927

版权

方法一：~~请UI喝杯奶茶。~~

方法二：

button {
    border-radius:15px 0;
    position:relative;
    transform:skew(-30deg)
}

button::before{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    background:radial-gradient(
        circle at 0 0,
        transparent,
        transparent 20px,
        black 20px
    );
    bottom:0;
    left:-20px;
    
}

然后在加after，调一下颜色和位置即可

即可实现效果啦