The method of CSS3 to realize inner concave fillet

Source: Internet
Author: User
Tags transparent color
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.