css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素） |
您所在的位置：网站首页 › div方块元素 › css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素） |
css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
|
核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
在开始些样式前，先在html代码放个div标签即可。 内凹圆角使用一个固定大小且完全透明的圆做径向渐变至目标色值，通过控制中心点与结束点来实现目标形状。 效果：
月亮 先以圆为基础图形，在上方图形的实现基础上控制径向大小与中心点 效果： 凹槽在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用来绘制虚线 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; } } |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |