CSS uses radial-gradient to implement coupon styles

This article will introduce how to use radial-gradient in CSS to achieve the coupon style effect shown in the following figure:

Drawing basic styles

First, we draw the basic style of the coupon, which is very simple and will not be explained in detail.

<div class="voucher">
  <div class="left"></div>
  <div class="right">Spend 100 minus 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;
  }
}

Anatomy of a Sawtooth Implementation

The jagged part can actually be seen as ten image fragments stitched together as shown below. Each segment is 6px wide, equal to the radius of the sawtooth, and 20px high. So we just need to draw that segment and repeat to fill in the rest.

We add the jagged style to the voucher pseudo element and we're done:

&::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;
}

The core code here is background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px); . It is actually a shorthand way of writing: background-image: radial-gradient(circle at 0px 10px, white 0, white 6px, #f76260 6px, #676260 100%); , which means that radial gradient starts from the position (0px, 10px), the gradient shape is a circle, and it gradually changes from white to white from 0 to 6px, which is a pure color; from 6px to the edge of the graphic, it gradually changes from #f76260 to #f76260, which is also a pure color.

To reuse our zigzag style code, we can define a scss mixin:

/**
  * In order to achieve better results, it is best to ensure:
  * 1. $height is divisible by $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;
  }
}

This makes it very convenient to use:

@include leftSawtooth(600px, 10, 6px, #f76260, white);

Upgraded version

The jagged color of the upgraded version is inconsistent with the background color of the left part. There will be some differences in implementation, but the idea is the same.

First, draw the basic style:

.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;
  }
}

Then, draw the jagged part. Note that the radius of the circle here is the blank part of 5px plus the 1px border, so the background fragment drawing needs an additional gradient:

background-image: radial-gradient(circle at 0px 10px,
  white 5px, /* The color inside the circle is the background color*/
  #ddd 5px,
  #ddd 6px,
  transparent 6px /* The color outside the circle is transparent*/
);

Note that we set the color inside the circle to the background color and the color outside the circle to the transparent color. The reasons for this will be explained later. The current effect is getting closer and closer to the goal, but there are still some differences:

The solution is to move the pseudo-element to the left by the size of the border. In this way, the line on the left side of the semicircle will be covered by the color inside the circle, while the line will be retained because other places are transparent (this is why the color inside the circle is set as the background color and the color outside the circle is set as the transparent color).

The complete mixin looks like this:

@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;
  }
}

Summarize

The above is the introduction of CSS using radial-gradient to achieve coupon style. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!