切角

.linear{
     200px;
    height: 100px;
    background: #58a;
    background: 
    linear-gradient(135deg,transparent 15px,#58a 0) top left,
    linear-gradient(-135deg,transparent 15px,#58a 0) top right,
    linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
    linear-gradient(45deg,transparent 15px,#58a 0) bottom left;
    background-size: 50% 50%;background-repeat: no-repeat;
}

弧形切角的制作

.linear{
         200px;
        height: 100px;
        background: #58a;
        background: 
            radial-gradient(circle at top left,transparent 15px,#58a 0) top left,
            radial-gradient(circle at top right,transparent 15px,#58a 0) top right,
            radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,
            radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left;
        background-size: 50% 50%;background-repeat: no-repeat;
    }
原文地址:https://www.cnblogs.com/7-Eleven/p/5638883.html