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

最新推荐文章于 2023-06-12 18:14:38 发布

Homilier

最新推荐文章于 2023-06-12 18:14:38 发布

阅读量2.4k

点赞数 5

分类专栏： css 文章标签： css 前端 javascript radial-gradient 径向渐变

本文链接：https://blog.csdn.net/Honiler/article/details/125671190

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

核心知识点：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;
    }
}