When doing mall projects, we may have experienced the “coupon” this kind of demand, the author in the past work, are directly required UI cut map to achieve, until one day the product told me a fantastic idea: the width of the coupon will change with the content! Suddenly, I got into a big thinking in my life. This image is not neat, so I had an idea: could I use pure CSS to achieve these effects?

0. The chamfering

Let’s start by looking at how CSS implements interior chamfering

.card {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 50px.#fff.#fff 10px, transparent 10px),
        radial-gradient(circle at right 50px.#fff.#fff 10px, transparent 11px),
        radial-gradient(circle at 100px top, #fff.#fff 10px, transparent 11px),
        radial-gradient(circle at 100px bottom, #fff.#fff 10px, transparent 11px);
    background-color: red;
}
Copy the code

Effect:

Actually think of first is to draw circle, in this case, main is to use a set of background attributes with radial gradient ramp to implement, the actual effect is the same, in shape or maintain the overall square, believe you also see out side effects, first of all, the add gradient needs and background color of the synchronization, such as setting up chamfering is white, The background is gray, that’s a giveaway.

Possible use of circles Set the color effect for the chamfer

1. Implement dashed lines

If you want pure CSS, you can use the dotted line gracefully. In fact, linear gradient can be done. Let’s take a look at it:

.line {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%.#ccc 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}
Copy the code

Code effect:

/* Adjust the size property slightly to change the dashed line width */
background-size: 20px 1px;
Copy the code

2. Implement wave boxes

Again using radial gradient, let’s try the wave box effect:

.card {
    background: red;
    width: 200px;
    height: 100px;
    position: relative;
}
.card:after {
    content: ' ';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff.#ffffff 4px, transparent 5px);
    background-size: 10px 10px;
}
Copy the code

Combination of 3.

Through the above examples, the effect of coupon clipping card style is already visible, we just need to combine these effects, the color position width and other details to adjust ~

Vertical coupon example effect:

.card1 {
    width: 120px;
    height: 150px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 90px.#fff.#fff 10px, transparent 10px),
        radial-gradient(circle at right 90px.#fff.#fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card1 > .line {
    position: absolute;
    bottom: 60px;
    left: 14px;
    width: 96px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%.#ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}
Copy the code

Extreme combination, horizontal coupon cutting card style effect:

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at 130px top, #fff.#fff 10px, transparent 11px),
        radial-gradient(circle at 130px bottom, #fff.#fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card2 > .line {
    position: absolute;
    top: 50px;
    right: 31px;
    width: 78px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%.#ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    transform:rotate(90deg);
}

.card2:after {
    content: ' ';
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff.#ffffff 4px, transparent 5px);
/* This can be optimized to make it semicircle, and right can also be set to 0 */
    background: radial-gradient(circle at right, #ffffff.#ffffff 4px, transparent 5px);
    background-size: 10px 14px;
}
Copy the code

Is sort of taste, only with a radial gradient and linear gradient can make to the effect, the thought of the UI don’t have to cut the little sister figure to me, you can go back to work early to accompany her boyfriend, I quickly showed her achievement, thought that the little sister told me, you that no shadows not good-looking, now let me once again lost in the big thinking of life.

Back to the station, I gave up thinking, shaking hands casually added a shadow, sure enough, betrayed ah!

But we want to calm down, before the idea is to draw a square first, and then place a circle or semicircle overlay, so eventually will be exposed, the result or must empty that semicircle gap ah, but CSS is obviously not to doInstead of drawing a square first and then removing the semicircle, instead of drawing the semicircle in the first place and filling in the irregular shape, there is no need to remove the semicircle. Let’s take a look at the following CSS and its effect:

width: 300px;
  height: 100px;
  background: 
  radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
  radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
  radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
  radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;
Copy the code

In this way, turn the above example into a two-petal square, fill in the color of the area outside the circle drawn by the transparent radial gradient, and use filter for the shaded areas

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background: 
        radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
        radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
    border-radius: 4px;
    filter: drop-shadow(2px 2px 2px rgba(0.0.0.2));
    /* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); * /
}
.card2 > .line {
    /* No change */
}
Copy the code

The final effect is as follows, deliberately deepened to see the shadows:

Unfortunately, the wave frame is still a semicircle on top of it, so there is no shadow effect, but the basic card form is perfectly implemented.

UI little sister told me the next day, she changed the design, called me to see, I said stop stop, or you cut the map to me.