使用css斜切边角倒切角

最新推荐文章于 2024-09-05 15:57:47 发布

coderhuihui

最新推荐文章于 2024-09-05 15:57:47 发布

阅读量1.2w

点赞数 8

分类专栏： css 笔记文章标签： css

本文链接：https://blog.csdn.net/qq_40580023/article/details/84770531

版权

笔记同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

HTML

效果图及 css写法


.rectangle{
    width: 305px;
    height: 75px;
    background: 
            linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rectangle{
    width: 305px;
    height: 75px;
    background: 
            linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,
            linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rectangle{
    width: 305px;
    height: 75px;
    background: 
            linear-gradient(135deg, transparent 52px, #ffffff 0) top left,
            linear-gradient(45deg, transparent 52px, #ffffff 0) bottom left,
            linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,
            linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.rectangle{
    width: 305px;
    height: 75px;
    background: 
            linear-gradient(135deg, transparent 0px, #ffffff 0) top left,
            linear-gradient(45deg, transparent 0px, #ffffff 0) bottom left,
            linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,
            linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}