Code display: Using CSS3 to achieve concave rounded corners

This article mainly introduces the example code for realizing concave rounded corners in CSS3. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

Filleting, everyone must be able to do it, border-radius, how to achieve concave rounded corners?

You can use a white round box to cover most of the square box, but this is opaque. When the background changes, you have to change the color of the covering box, or the background is a gradient, which is more troublesome to change. , or the background is a picture, etc., it is simply not easy to change. This method has limitations. To put it bluntly, after the covered part is opaque, the adaptability is not strong.

Here is a concave rounded corner implemented using radial gradient, which can solve the above problems. You can use CSS to generate a concave fillet with a transparent background.

1. Basic linear gradient

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</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. Concentrate the gradient range until it overlaps to form two color blocks separated by red and blue

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

4. The color can be set to transparent. If you change red to transparent, you can see only blue color blocks.

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

<p></p>

5. In the same way as the radial gradient, shrink the gradient circle until it overlaps, and set the color near the center of the circle to transparent.

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

6. The radial gradient can set the center position of the radius circle, so set it to the left top corner, adjust the left top radius size to 200px, I found that the concave rounded corners with transparent background were realized.

When applying, you can use pseudo-element settings, and then use absolute positioning, child absolute parent phase, adjust the position, and combine to achieve the desired effect

 /* 径向渐变主体 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<p class=&#39;raidal1&#39;></p>

7. In the same way in the four directions, just adjust the center position of the circle

 /* 左上 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
/* 右上 */ 
.raidal2 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
/* 右下 */ 
.raidal3 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
/* 左下 */
 .raidal4 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

8. Similarly, if you don’t want the corners to be so rounded, that’s also the case It can be elliptical, and the radius is set to two parameters, which is an ellipse.

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

Radial gradient has many parameters that you can try to adjust yourself. Various strange shapes can appear, which will not be demonstrated here. Relatively speaking, concave rounded corners are enough

The above is the detailed content of Code display: Using CSS3 to achieve concave rounded corners. For more information, please follow other related articles on the PHP Chinese website!