No more words, see the effect first.

The online preview
background-image: radial-gradient()
radial-gradient
radial-gradient
%
px 

{
  height: 100px;
  width: 100px;
  background-image: radial-gradient(red 25%, yellow 50%, green 75%);
}
Copy the code

The effect is as follows:

{
  height: 100px;
  width: 100px;
  background-image: radial-gradient(red 25%, yellow 25%, yellow 50%, green 50%, green 75%);
}
Copy the code

The effect after change is as follows:

<div class='ticket'></div>
Copy the code
.ticket {
  width: 300px;
  height: 180px;
  position: relative;
  background: red;
  margin: 0 auto;
}
.ticket:before,
.ticket:after {
  content: ' '; display: block; width: 30px; height: 100%; background-size: 30px 30px; /* The size of a repeat */ background-repeat: repeat-y; background-image: radial-gradient(#fff 8px, transparent 8px);position: absolute; top: 0; } .ticket:before { left: -15px; }. Ticket :after {right: -15px; }Copy the code

It can be seen from the effect drawing that the height of each circle is similar to that of the protrusion, so the stop position of the white gradient should be about 1/4 of a repeat, and the remaining part will be filled with the last color value. The transparent color is used here, so that it can be well applied no matter how the background of the element changes. Note: Background-repeat and background-image attributes cannot be combined, the effect will be messy. Webstorm will prompt you to merge the two properties and ignore them.