CSS implementation of a convex shape code example

This article brings the content is about the CSS implementation of the Convex shape code example, there is a certain reference value, the need for friends can refer to, I hope to help you.

Yesterday saw someone want to do convex box, today with a few minutes to do a bit, found quite ingenious, share

The final effect is as follows

Here's the code:

   <div class= "box" >        <span class= "Big" ></span>        <span class= "Top" ></span>        <span class= "Topr" ></span>    </div>

body {Display:flex;            Justify-content:center;                        Align-items:center;            . box {position:relative;            width:400px;            height:400px;            top:200px;                       Color:lightblue;            . big {Position:absolute;            width:400px;            height:200px;            border-radius:20px;            Background-color:currentcolor;        bottom:0;            }. Top {position:absolute;            width:100px;            Left:calc ((400px-100px)/2);            height:150px;            border-radius:20px 20px 0 0;            Background-color:currentcolor;        top:50px;            }. Top::before {content: "";            Position:absolute;            Background-color:lightblue;            height:48px;            width:100px;            Left: -100px;        top:102px; }. Top::befoRe {content: "";            Position:absolute;            Background-color:lightblue;            height:48px;            width:100px;            Left: -100px;        top:102px;            }. Top::after {content: "";            Position:absolute;            Background-color: #fff;            border-radius:0 0 20px 0;            height:48px;            width:100px;            Left: -100px;        top:102px;            }. topr {position:absolute;            Background-color:lightblue;            height:48px;            width:100px;            right:50px;        top:152px;            }. Topr::after {content: "";            Position:absolute;            Background-color: #fff;            border-radius:0 0 0 20px;            height:48px;            width:100px;            left:0;        top:0; }   }}

At first I thought as long as the upper and lower two rounded rectangle stitching on the line, no no no, in fact, the intersection of two fillets there are rounded corners, a look at this fillet is known, you can use the white rounded rectangle cover, then the problem comes:
After the white rounded rectangle is covered, a gap is formed in the middle, which needs to be filled with blue. So the idea is this:

First, create the top and bottom two rounded rectangles:
Html:

<span class= "Big" ></span> <span class= "Top" ></span>

Two: In the upper corner of the rectangle with a blue-colored rounded rectangle, tangent to the upper and lower two rectangles, but the length and width can not exceed the upper and lower two large rectangles

Three: Then added in the small blue rectangular block, each added a uniform size of the white rectangle overlay, respectively, set the right lower corner and the left lower corner, the code is as follows:

border-radius:0 0 20px 0;border-radius:0 0 0 20px;

OK, you are done! A convex frame is ready to be made.