使用css斜切边角倒切角

最新推荐文章于 2025-06-01 15:06:08 发布

原创最新推荐文章于 2025-06-01 15:06:08 发布 · 1.3w 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#css

笔记同时被 2 个专栏收录

33 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS的线性渐变属性来创建复杂的视觉效果，包括多种方向的渐变叠加，以及如何精确控制渐变的位置和颜色，适用于网页设计中对背景效果有高要求的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}