如何在css中使用径向渐变实现优惠券样式效果如下图：

绘制基本样式首先优惠券的样式很简单，所以我不会详细介绍。

<div class="voucher">
  <div class="left"></div>
  <div class="right">满 100 减 30</div>
</div>

/* scss */
.voucher {
  width: 600px;
  height: 200px;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background-color: #f76260;
  }
  .right {
    height: 100%;
    border: 1px solid #ddd;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
}
复制代码

锯齿实现分析

锯齿部分实际上可以看作是十个图像片段拼接在一起，如下图。每个片段宽 6 像素，高 20 像素。所以我们只绘制该部分并重复填充的其余部分。

我们将锯齿状样式添加到voucher的伪元素中，我们就完成了：

&::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 6px;
  left: 0;
  top: 0;
  background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px);
  background-size: 6px 20px;
}
复制代码

这里的核心是background-image-px：radial-gradient 0x，白色6px ，#f76260 6px）；。它实际上是以下写法的缩写： background-image: Radial-gradient(circle at 0px 10px,white 0,white 6px,#f76260 6px,#676260 100%);❀, ( 0px, 10px），渐变的形状是圆形的，从0到6px从white到white，是纯色；距图形边缘 6px 从 #f76260 到 #f76260，也是纯色。

为了复用我们的zigzag样式代码，我们可以定义一个scss mix：

/**
  * 为了实现比较好的效果，最好确保：
  * 1. $height 可以被 $num 整除
  * 2. 2 * $radius < $height / $num
  */
@mixin leftSawtooth($height, $num, $radius, $color, $bgColor) {
  $segmentHeight: $height / $num;
  height: $height;
  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: $radius;
    left: 0;
    top: 0;
    background-image:
      radial-gradient(circle at 0px $segmentHeight / 2, $bgColor $radius, $color $radius);
    background-size: $radius $segmentHeight;
  }
}
复制代码

这样使用起来非常方便：

@include leftSawtooth(600px, 10, 6px, #f76260, white);
复制代码

升级版

升级版背景zigzag颜色和左边部分颜色不一致，有在实现上会有一些差异，但是想法还是一样的。

先画基本样式：

.voucher {
  width: 600px;
  height: 200px;
  margin: 20px auto;
  display: flex;
  position: relative;
  border: 1px solid #ddd;
  .left {
    width: 30%;
    height: 100%;
    border-right: 1px dashed #ddd;
  }

  .right {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
}
复制代码

然后画锯齿状部分。注意，这里圆的半径是 5px 的空部分加上 1px 边框，所以背景片段需要添加额外的渐变：

background-image: radial-gradient(circle at 0px 10px,
  white 5px, /* 圆内的颜色是背景色 */
  #ddd 5px,
  #ddd 6px,
  transparent 6px /* 圆外的颜色是透明色 */
);
复制代码

注意，我们将圆内部的颜色设置为背景颜色，并且圆外的颜色改为透明色，为什么会这样，后面会解释。目前的效果已经越来越接近目标了，但是还是有一个小偏差：

解决办法就是将伪元素向左移动一个边框大小的位置。这样，半圆左边的线就会被圆内的颜色覆盖，而其他地方因为是透明的而被保留（这就是为什么将圆内的颜色设置为背景色，并且圆圈外的颜色设置为透明））。

完整的mixin如下：

@mixin leftSawtoothBorder($height, $num, $radius, $bgColor, $borderColor, $borderWidth) {
  $segmentHeight: $height / $num;
  $extendedRadius: $radius + $borderWidth;
  height: $height;
  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: $extendedRadius;
    left: -$borderWidth;
    top: 0;
    background-image: radial-gradient(circle at 0px $segmentHeight / 2,
      $bgColor $radius,
      $borderColor $radius,
      $borderColor $extendedRadius,
      transparent $extendedRadius
    );
    background-size: $extendedRadius $segmentHeight;
  }
}

作者：Aaaaaaaaaayou
链接：https://356ddimf09/356ddimf09/356ddimf09/56dimf0 9.
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。