Share an effect code that uses CSS3 to achieve an internal concave fillet

This article mainly introduced the CSS3 realizes the inner concave fillet The example code, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Let's take a look at it with a little knitting.

Round corner, we will certainly do, Border-radius, how to achieve the internal concave fillet?

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.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial