The method of CSS3 to realize inner concave fillet

Round corner, we will certainly do, Border-radius, how to achieve the internal concave fillet? This article mainly introduces the CSS3 realization of the inner concave fillet of the example code, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Can take a white round box to cover the large half of the square box implementation, but this is not transparent, the background changes, it is necessary to cover the color of the box, or the background is a gradient, change it more troublesome, or the background is a picture, etc., it is directly not good to change, this method has limitations. White is the cover of that part of the opaque, self-adaptability is not strong.

An internal concave fillet, which is implemented with a radial gradient, is presented here to solve the above problem. You can use CSS to create an inner concave fillet with a transparent background.

1. Basic linear gradient

p {height:100px; width:200px; background-image:linear-gradient (90deg,red,blue);} <p> Red to blue gradient from left to right </p>

2. Add percentage to adjust the gradient range

p {height:100px; width:200px; background-image:linear-gradient (90deg,red 20%,blue 80%);} <p></p>

3. Condense the gradient range until coincident to form a red-blue two-color block

p {height:100px; width:200px; background-image:linear-gradient (90deg,red 50%,blue 50%); <p></p>

4. Color can be set transparent color, transparent, red to transparent color, you can see only blue color blocks.

p {height:100px; width:200px; background-image:linear-gradient (90deg,transparent 50%,blue 50%);} <p></p>

5. Similarly to the radial gradient, the same narrowing of the gradient ring, until coincident, near the center of the color set to transparent.

/* Radial Gradient body */. Raidal {height:100px; width:100px; background:radial-gradient (transparent 50%,blue 50%); <p class= ' Rai Dal ' ></p>

6. Radial gradient can be set to the center of the radius of the position, so set to the left corner of the top adjustment radius of 200px, the background is transparent to find the inner concave fillet is realized.

The application can be set with pseudo-elements, and then absolute positioning, sub-absolute father, adjust the position, combined into the desired effect

/* Radial Gradient body */. Raidal1 {height:100px; width:100px; Background:radial-gradient (200px at left Top,transparent 50%,blue 50%); }<p class= ' Raidal1 ' ></p>

7. In the same four direction, adjust the center position can be

/* Upper Left */. raidal1 {height:100px; width:100px; Background:radial-gradient (200px at top,transparent 50%,blue 50%);} /* Right up */. raidal2 {height:100px; width:100px; Background:radial-gradient (200px at R top,transparent 50%,blue 50%);} /* Right down */. raidal3 {height:100px; width:100px; Background:radial-gradient (200px at R bottom,transparent 50%,blue 50%); }/* left Down */. raidal4 {height:100px; width:100px; Background:radial-gradient (200px at bottom,transparent 50%,blue 50%); } <p class= ' Raidal1 ' ></p> <p class= ' raidal2 ' ></p> <p class= ' raidal3 ' ></p> <p class= ' Raidal4 ' ></p>

8. Similarly, do not want such rounded corners, also can be oval, RADIUS set two parameters, is the ellipse.

/* Upper Left */. ellipse {height:100px; width:100px; background:radial-gradient (200px 300px at Top,transparent 50%,blue 50% );} <p class= ' ellipse ' ></p>

Radial gradient There are many parameters you can try to adjust yourself, you can have a variety of strange shapes, here does not demonstrate. In contrast, the concave fillet is sufficient.