线性渐变实现箭头符号

# 线性渐变实现箭头符号

线性渐变实现箭头符号。

# 关键点

利用多重线性渐变拼凑箭头形状
恰当运用 background-position，background-size

HTML：

<div class="arrow"></div>

SCSS：

 .arrow{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height: 40px;
    text-align: center;
    color: white;
    font-size: 200%;
}
.arrow{
    background:
    linear-gradient(-135deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)
    top right,
    linear-gradient(-45deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)
    bottom right,
    linear-gradient(-135deg, #04e6fb 0, #65ff9a 90%, transparent 90%)
    top left,
    linear-gradient(-45deg, #04e6fb 0, #65ff9a 90%, transparent 90%)
    bottom left;
    background-size: 90% 50%;
    background-repeat: no-repeat;
}

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

阅读全文