关于元素抠角的技术选型与实现（优惠券，商品优惠券，礼包券等等）

作者: 赵Wayne | 来源:发表于2022-04-21 11:26 被阅读0次

应用场景

【1】领券中心（优惠券，商品优惠券，礼包券等等）
【2】优惠券（多种布局混合多种版式的券样式）
【3】cms后台管理促销页

image.png

调研淘宝和京东的WAP站点，会发现他们的都是使用的背景图来实现的优惠券的抠角，当然使用背景图就可以任意变换（设计成什么样就是什么样）但是存在的问题就是多个促销部门运营部门的个性化券样式成本比较高（每一个样式都需要设计出一张图）所以我们在CMS配置优惠券模块添加上拾色器通过下面列出的【解决方案】实现了，一次性开发不仅节约设计成本还满足多种业务运营需求。

image.png

解决方案

【1】通过css元素叠加来实现抠角（缺点：不能透过背景后面的图片或者背景色）

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
/*body{
    background-color: red
}*/
 .semi-circle {
    width: 200px;
    height: 400px;
    margin: 200px auto;
    position: relative;
    background: #000000;
    border-radius: 8px;
  }
  .semi-circle:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }
  .semi-circle:before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  </style>
</head>
<body>
 <div class="semi-circle"></div>
</body>
</html>

【2】通过SVG或者字体图标来实现（缺点：比较适合边元素比如边缘锯齿的）

image.png

这块的代码就不写了

【3】通过css3径向渐变画出缺角（圆角扣角）

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>

  <style>
body {
    background: linear-gradient(90deg, #fff, #bbb);
}

div {
    position: relative;
    width: 20vw;
    height: 8vw;
    margin: 1vw auto;
    border-radius: 1vmin;
    // background: #e91e63;
    overflow: hidden;
    line-height: 8vw;
    color: #fff;
    text-align: center;
}

.linear {
    background-size: 100% 100%;
    background-image: radial-gradient(circle at 20% 0, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
}

.linear2 {
    background-size: 49.9% 50%;
    background-image: radial-gradient(circle at 50% 100%, transparent 0px, transparent 10px, rgb(203, 23, 227) 10px), radial-gradient(circle at 0% 0%, transparent 0px, transparent 0px, rgb(203, 23, 227) 0px), radial-gradient(circle at 50% 0px, transparent 0px, transparent 10px, rgb(203, 23, 227) 10px), radial-gradient(circle at 0% 0%, transparent 0px, transparent 0px, rgb(203, 23, 227) 0px);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
}

  </style>
</head>
<body>
<div class="linear">使用径向渐变实现内切圆角</div>
<div class="linear2">径向渐变实现内切圆角可以是4边</div>

</body>
</html>

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">

  <style>
body {
    background: linear-gradient(90deg, #fff, #bbb);
}

div {
    position: relative;
    width: 20vw;
    height: 8vw;
    margin: 1vw auto;
    border-radius: 1vmin;
    // background: #e91e63;
    overflow: hidden;
    line-height: 8vw;
    color: #fff;
    text-align: center;
}

.shadow {
    
    &::before {
        position: absolute;
        content: "";
        top: -2vw;
        left: -2vw;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        box-shadow: 0 0 0 25vw #e91e63; 
        z-index: -1;
        animation: shadowmove 10s infinite;
    }
}

.shadow2 {
        &::before {
        position: absolute;
        content: "";
        top: -2vw;
        left: -2vw;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        box-shadow: 0 0 0 15vw #e91e63; 
        z-index: -1;
    }
    
    &::after {
        position: absolute;
        content: "";
        bottom: -2vw;
        right: -2vw;
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        box-shadow: 0 0 0 15vw #e91e63; 
        z-index: -1;
    }
}

@keyframes shadowmove {
    0%{
        background: #e91e63; 
        box-shadow: 0 0 0 0 #e91e63; 
    }
    
    10% {
        background: transparent; 
        box-shadow: 0 0 0 0 #e91e63; 
    }
    
    50% {
        background: transparent; 
        box-shadow: 0 0 0 25vw #e91e63; 
    }
}

.linear {
    background-size: 100% 100%;
    background-image: radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
}

.linear2 {
    background-size: 70% 70%;
    background-image: 
        radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw),
        radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw),
        radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw),
        radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
}

  </style>
</head>
<body>
<div class="shadow">使用阴影的扩散半径实现内切圆角</div>
<div class="shadow2">阴影实现缺点，单个标签最多是2边</div>
<div class="linear">使用径向渐变实现内切圆角</div>
<div class="linear2">径向渐变实现内切圆角可以是4边</div>

</body>
</html>

【4】通过radial-gradient配合CSS遮罩mask

image.png
使用以下两者配合实现左右边的锯齿
CSS radial-gradient径向渐变函数
CSS遮罩mask

  background-image: linear-gradient(180deg, #853CEE 0%, #701EE5 100%); 
  //圆角开始的位置0.07rem 0.12rem，圆角的大小 0.07rem
  -webkit-mask-image: radial-gradient(circle at 0.07rem 0.12rem, #0000 0.07rem, red 0);
  mask-image: radial-gradient(circle at 0.07rem 0.12rem, #0000 0.07rem, red 0);
  //整个遮罩的偏移量-0.07rem
  -webkit-mask-position: -0.07rem;
  mask-position: -0.07rem;
  //圆角的间距
  -webkit-mask-size: 100% 0.21rem;  
  mask-size: 100% 0.21rem;

【5】通过radial-gradient配合伪类