使用css斜切边 角 倒切角

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