CSS graphics drawing: realize concave rounded corners, moon, puzzle pieces, coupons (no hidden graphics to block the underlying elements)

 Core knowledge points: CSS radial-gradient() function, creating "images" with radial gradients
 

Before starting some styles, just put a div tag in the html code.

<div class="block"></div>

• concave fillet

 Use a fixed size and fully transparent circle to make a radial gradient to the target color value, and achieve the target shape by controlling the center point and end point.

Effect:

​

css code: 

.block {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle 200px at 100% 0, transparent 200px, #000 50%);
}

 

• moon

First use the circle as the basic graphic, and control the radial size and center point on the basis of the realization of the upper graphic

 Effect:

 ​

CSS code: 

.block {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    background-image: radial-gradient(circle 160px at right 0, transparent 160px, yellow);
}

• puzzle pieces

The groove draws a fully transparent circular radial gradient on any side of top, bottom, left, and right, and the convex corner draws a circle on any side and offsets itself by 50% of the unit.

Effect:

​

css code:

.block {
    width: 200px;
    height: 200px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
    }
    &::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle 40px at top, transparent 40px, green);
    }
    &::after {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: green;
    }
}

• coupon

Draw a fully transparent circular radial gradient groove on the opposite side

Effect:

 ​

css code:

.block {
    width: 200px;
    height: 100px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
    }
    &::before {
        left: 0;
        background-image: radial-gradient(circle 10px at left, transparent 10px, #fc5532 50%);
    }
    &::after {
        right: 0;
        background-image: radial-gradient(circle 10px at right, transparent 10px, #fc5532 50%);
    }
}

 

• horizontal coupon

Compared with the coupon graphic above, the direction of the groove is shifted up and down to the left, adding rounded corners and lines

Effect:

 ​

The html code adds a div to draw a dotted line

<div class="block">
    <div class="line"></div>
</div>

 css code:

.block {
    width: 200px;
    height: 100px;
    position: relative;
    &::before,
    &::after {
        content: ' ';
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
    }
    &::before {
        top: 0;
        background-image: radial-gradient(circle 10px at 80px top, transparent 10px, #fc5532);
        border-radius: 10px 10px 0 0;
    }
    &::after {
        bottom: 0;
        background-image: radial-gradient(circle 10px at 80px bottom, transparent 10px, #fc5532);
        border-radius: 0 0 10px 10px;
    }
    .line {
        position: absolute;
        z-index: 1; // 必要，否则会被父布局的block::after内容遮住
        top: 10px;
        bottom: 10px;
        left: 79px;
        border: 1px dashed #fff;
    }
}