Let’s take a look at the effect

Online address

CodePen address, the link will be slightly different from the preview image above, because the coupon is splicked. different parts will be colored to make it easier to understand.

preface

This method is purely for IE10 + compatibility, so in addition to compatibility advantages, it is weaker than mask writing method in other aspects, mainly reflected in the following disadvantages

1. The background must be a solid color. Gradient is not supported
2. The amount of code should be larger than the mask, the more complex the more obvious
3. Mask writing is more flexible, and some styles may not work
4. The logical implementation is more complex, as you can see below

If there are IE compatibility problems, later do not want to maintain abusive street, please use their own picture scheme.

First implementation

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo1 {
  background: radial-gradient(circle at left, transparent 1em.#58a 0) left;
}
Copy the code

Second implementation

It can be thought of as a special first implementation where we just fold the copy in half, as shown below

Therefore, we only need to layer div left and right twice through background-size, and then draw a transparent semi-circle respectively through radial-gradient. Remember this idea of splitting, and all subsequent styles are implemented using this idea

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo2 {
  background: radial-gradient(circle at left, transparent 1em.#58a 0) left,
    radial-gradient(circle at right, transparent 1em, red 0) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}
Copy the code

Third implementation

Following the second idea, we just need to split the style into four parts

The following code

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo3 {
background: radial-gradient(circle at left top, transparent 1em, red 0) left
      top,
    radial-gradient(circle at left bottom, transparent 1em, yellow 0) left bottom,
    radial-gradient(circle at right top, transparent 1em, orange 0) right top,
    radial-gradient(circle at right bottom, transparent 1em, aqua 0) right
      bottom;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
Copy the code

Fourth implementation

This is the same idea, so we can split it into six parts

The following code

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo4 {
background: radial-gradient(circle at left top, transparent 1em, red 0),
    radial-gradient(circle at left bottom, transparent 1em, black 0),
    radial-gradient(circle at right top, transparent 1em, yellow 0),
    radial-gradient(circle at right bottom, transparent 1em, orange 0),
    radial-gradient(circle at center top, transparent 1em, beige 0),
    radial-gradient(circle at center bottom, transparent 1em, aqua 0);
  background-size: 33.33% 50%;
  background-position: left top, left bottom, right top, right bottom,
    top center, bottom center;
  background-repeat: no-repeat;
}
Copy the code

Fifth implementation

The whole part is divided into two parts on the left and right. Take the left part as an example. Since the number of semicircles is variable, we use repeat to tile with Y-axis, and the tile part is marked with green line

The following code

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo5 {
  background: radial-gradient(circle at left center, transparent 8px, red 0),
    radial-gradient(circle at right center, transparent 8px, orange 0);
  background-size: 50% 30px;
  background-position: left, right;
  background-repeat: repeat-y;
}
Copy the code

Sixth realization

This is a little bit more complicated and we can think of it as the fourth implementation and add a little dot to the fifth implementation, so we can split this pattern into seven parts, with the middle part in the way of the Repect-y normal little ball (blue box).

The following code

.card {
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
}
.demo6 {
  background: radial-gradient(circle at left top, transparent 1em, red 0),
    radial-gradient(circle at left bottom, transparent 1em, black 0),
    radial-gradient(circle at right top, transparent 1em, yellow 0),
    radial-gradient(circle at right bottom, transparent 1em, orange 0),
    radial-gradient(circle at center top, transparent 1em, beige 0),
    radial-gradient(circle at center bottom, transparent 1em, aqua 0),
    radial-gradient(circle at center center, transparent 4px.#47cf73 0);padding:1em 0;
  background-size: 33.33% 1em.33.33% 1em.33.33% 1em.33.33% 1em.33.33% 1em.33.33% 1em.100% 1em;
  background-position: left top, left bottom, right top, right bottom,
    top center, bottom center,left center;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-y;
  background-clip:border-box,border-box,border-box,border-box,border-box,border-box,content-box;
}
Copy the code

conclusion

If there is no compatibility requirement, it is better to use mask for implementation. No matter from any aspect, mask should be implemented in this way. The sixth implementation code is a little redundant, and I hope you can inform me if there is a better way.

Only as a primer, if there is a compatible consideration or the picture is better, later maintenance of others is easy to be killed, their maintenance is easy to worry about death.