Demand scenarios

Add a coupon category to display users’ coupons

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

Step by step and dismantling

Coupons are featured with reverse rounded corners. In order to better display effect and adapt to various scenarios, CSS is recommended instead of background images.

There are several options available online:

One is in the form of Boder + Clip, cut out four small semicircle corners and put them together

One is radial gradient, while the other needs to consider its compatibility

One is the use of background images, which are slower to load, worse than CSS experience, and better compatibility

The specific code is not shown here

Reference to other online content: segmentfault.com/a/119000001…

Attention to detail

One point to make:

It’s important to pay attention to the details, as well as allowing for compatibility and bandwidth and load times, and leaving room for possible variations later.

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

What if we need to specify a semicircle border color and other border colors while changing different background colors?

Refer to the following figure:

The border color and background color can be inconsistent, and the entire border color can be consistent. However, the above two methods, no matter border or gradient, are obviously not applicable.

Other methods

The coupon style is two pieces spliced together with a semicircle pattern

So the idea could be:

  • Create a box that contains the left and right card sections with the card background color defined separately
  • The box is covered with two semicircles, one at the top and one at the bottom, with a white background
  • The border of the card and semicircle can be customized, using the same color number

It’s not practical to create a semicircle border using CSS directly, but there are other ways to achieve this visually.

Need a few space thinking and imagination ability in the middle, the process may be more complex, but can realize a goal to go, the effect of another path is better.

Create a total container

The container controls the width, height and layout of the card card, with no other styles

Create left and right card coupons

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

Set the upper and lower left corners separately for the left container, and set the upper and lower right corners separately for the right container

The left and right containers have their own custom background colors

Put a semicircle

Add two semicircles with a white background and undecided borders

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

You can customize the offset and keep it the same

Now that you’ve done your initial styling, it’s time to set up the borders

Set the border

Add borders to the left and right card containers and the two semicircles without affecting the background color

Make half round

The core is to make a semicircle (outline only)

<div class="circle"></div> // top half circle. Circle {width: 200px; height: 100px; /* width half */ border-radius:100px 100px 00; /* Background-color:#fff;border: 1px solid gray; border-bottom: none; } // lower half circle. Circle {width: 200px; height: 100px; /* width half */ border-radius: 00 100px 100px; /* Background-color:#fff;
    border: 1px solid gray;
    border-bottom: none;
}
Copy the code