Rounded corners are often used in normal development, and convexity is easy to implement, as long as the border-radius attribute is used directly. However, if there is a concave corner, the background image is generally used directly, but if there is no background image, pure CSS can also achieve this effect.
simple concave
To achieve this kind of concave fillet is relatively simple, the code is as follows:
html:
<div class="radius"></div>
css:
By changing the corresponding direction, the concave fillet of four angles can be realized. I don’t need to say more about the concave radius, just adjust px
Let's talk about a slightly more complicated one, with four corners concave
Individual elements cannot be achieved through CSS, only through plural elements, the code is as follows
html:
css:
There is nothing much to say about the code. The simple concave elements in four different directions are realized through the flex layout, which is clear and clear. It can be easily adjusted by rewriting the concave radius and the width and height of the container element.