CSS uses radial gradient to implement coupon style

Time:2020-10-9

This paper describes how to use radial gradient in CSS to achieve the coupon style effect as shown in the following figure:

 

Draw basic styles

First of all, we draw the basic style of the coupon, which is very simple, not to mention.

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

 

Analysis of sawtooth implementation

The zigzag part can be seen as a mosaic of ten image fragments as shown below. The width of each fragment is 6px, and the height is 20px. So we just need to draw the segment and fill in the rest.

 
 

We add the zigzag pattern to the fake element of the voucher 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, ා f762606px). Background image: radial gradient (circle at 0px 10px, white 0, white 6px, ා f762606px, ා 676260 100%); it means that the radial gradient starts from the position of (0px, 10px), and the shape of the gradient is circular, from 0 to 6px, from white to white, that is, solid color; from 6px to the edge of the figure, it changes from ᦇ f76260 to ᦇ f76260 100%);, which means that the shape of the gradient is circular, from 0 to 6px, white changes from white to white, that is, solid color; from 6px to the edge of the figure, it gradually changes from # f76260 to # And it’s a solid color.

In order to reuse our sawtooth style code, we can define a mixin of SCSS

/**
  *In order to achieve better results, it is better to ensure that:
  *1. $height can be divided 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;
  }
}

 

In this way, it is convenient to use

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

 

Upgraded version

The upgraded version of the zigzag color and the left part of the background color is inconsistent, there will be some differences in the implementation, but the idea is still 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 5px plus 1px border, so the background fragment drawing needs to add an additional gradient:

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

Notice that we set the color inside the circle as the background color, and the color outside the circle as the transparent color. We will explain why this is the case. Now the effect is getting closer and closer to the target, but there are still some differences

 
 

The solution is to move the pseudo element to the left by a border size position. In this way, the line on the left side of the semicircle will be covered by the color inside the circle, and the line will be retained in other places because of the transparent color (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 is as follows:


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

summary

The above is a small introduction to CSS, using radial gradient to achieve coupon style, I hope to help you, if you have any questions, please leave me a message, small editor will reply to you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!