css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）

 核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
 

在开始些样式前，先在html代码放个div标签即可。

<div class="block"></div>

• 内凹圆角

 使用一个固定大小且完全透明的圆做径向渐变至目标色值，通过控制中心点与结束点来实现目标形状。

效果：

​

css代码： 

.block {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle 200px at 100% 0, transparent 200px, #000 50%);
}

• 月亮

先以圆为基础图形，在上方图形的实现基础上控制径向大小与中心点

 效果：

 ​

CSS代码： 

.block {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    background-image: radial-gradient(circle 160px at right 0, transparent 160px, yellow);
}

• 拼图块

凹槽在top、bottom、left、right任一边绘制一个全透明圆形径向渐变，凸角在任一边绘制一个圆形向外偏移自身50%个单位即可

效果：

​

css代码：

.block {
    width: 200px;
    height: 200px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
    }
    &::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle 40px at top, transparent 40px, green);
    }
    &::after {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: green;
    }
}

• 优惠券

对边绘制一个全透明圆形径向渐变的凹槽

效果：

 ​

css代码：

.block {
    width: 200px;
    height: 100px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
    }
    &::before {
        left: 0;
        background-image: radial-gradient(circle 10px at left, transparent 10px, #fc5532 50%);
    }
    &::after {
        right: 0;
        background-image: radial-gradient(circle 10px at right, transparent 10px, #fc5532 50%);
    }
}

• 横向优惠券

相比上方的优惠券图形，凹槽方向改为上下向左偏移，增加了圆角和线条

效果：

 ​

html代码增加一个div用来绘制虚线

<div class="block">
    <div class="line"></div>
</div>

 css代码：

.block {
    width: 200px;
    height: 100px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
    }
    &::before {
        top: 0;
        background-image: radial-gradient(circle 10px at 80px top, transparent 10px, #fc5532);
        border-radius: 10px 10px 0 0;
    }
    &::after {
        bottom: 0;
        background-image: radial-gradient(circle 10px at 80px bottom, transparent 10px, #fc5532);
        border-radius: 0 0 10px 10px;
    }
    .line {
        position: absolute;
        z-index: 1; // 必要，否则会被父布局的block::after内容遮住
        top: 10px;
        bottom: 10px;
        left: 79px;
        border: 1px dashed #fff;
    }
}