Demand scenarios

Add a coupon category to display the user’s coupons

The common design style is shown in the figure below, and the core is semicircle

Step by step disassembly

Coupons are characterized by reverse rounded corners. In order to show better results and adapt to a variety of scenes, it is not recommended to use the background image form, but recommendedcss.

There are several solutions on the Internet:

One isboder+clipCut out 4 small semicircular corners and put them together

One isradial-gradientRadial gradient, relative to the last need to consider its compatibility

One is to use the background image, which is characterized by slower loading and more experiencecssPoor, good compatibility

The specific code will not be demonstrated here

Refer to other online content: https://segmentfault.com/a/1190000015705604

Pay attention to the details

It should be noted that:

Be sure to pay attention to the details, just as we consider compatibility and bandwidth as well as load duration, we also need to make room for possible changes in the future

The characteristics of the first two schemes are that both the left and right containers have background color, and the semicircle border color is obtained by intercepting the background color

What happens when we need to specify the semicircle border and other border colors and change different background colors at the same time?

Refer to the following figure:

The border color and the background color can be inconsistent, and the whole border color can be consistent, and these two methods are eitherborderstillgradientObviously not

Other methods

The coupon style is two parts stitched together with a semicircle

Then our thinking can be as follows:

• Create a box that contains the left and right card coupon parts. The background color of the card is customized
• The box is covered with two semicircles, one at the top and one at the bottom, with a white background
• Both the card coupon and the semicircle border can be customized. One color code can be used for the same color

Direct usecssIt’s not realistic to create a frame with semicircles, but we can do it visually in other ways

Some spatial thinking and imagination are needed in the middle. The process may be more complicated, but it is better to find another way to achieve the goal

Create a master container

The container controls the width, height and position of the coupon, without other styles

Create left and right cards

Add two containers, one on the left and one on the right, to divide the total container space

The upper left and lower left corners are set separately for the left container, and the upper right and lower right corner corners are set for the right container

The left and right containers set their own custom background colors

Stick a semicircle

Add two semicircles with white background and pending border

Absolute positioning relative to the total container, one on the top and one on the bottom

The offset can be customized and kept consistent

At this point, the initial style is complete, and it’s time to set the border

Set border

Add a border to the left and right card holder and two semicircles without affecting the background color

Making semicircles

The core is to make semicircles (only outline)

<div class="circle"></div>
//Upper semicircle
.circle{
    width: 200px;
    Height: 100px; / * half the width*/
    border- radius:100px 100px  0 0; / * upper and right are the length of height*/
    background-color: #fff;
    border: 1px solid gray;
    border-bottom: none;
}
//Lower semicircle
.circle{
    width: 200px;
    Height: 100px; / * half the width*/
    Border radius: 0 0 100px 100px; / * upper and right are the length of height*/
    background-color: #fff;
    border: 1px solid gray;
    border-bottom: none;
}