使用css斜切边角倒切角_css斜切角-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40580023/article/details/84770531

本文详细介绍了如何使用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;
}