线性渐变实现内切角

# 线性渐变实现内切角

线性渐变实现内切角。

# 关键点

利用多重线性渐变及单个元素可以设置多层渐变叠加实现

HTML：

<div class="notching"></div>

SCSS：

 .notching{
    width: 160px;
    padding: 60px 20px;
}
.notching{
    background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, deeppink 0)
    top right,
    linear-gradient(-45deg, transparent 15px, deeppink 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, deeppink 0)
    bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

效果如下（点击 HTML/SCSS 可以对代码进行编辑）：

阅读全文