Share an article using CSS3 to achieve concave rounded corners effect code

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 fillet 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. Condensation The gradient range until they overlap 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 color, transparent, change red to transparent color, you can see There are only blue color blocks.

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

<p></p>

5. Think of the radial gradient in the same way, also 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 radius size left top to 200px, and you will find a concave rounded corner with a transparent background Achieved.

When applying, you can use pseudo elements to set, then use absolute positioning, adjust the position of the child and the parent, and combine it into 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. Similarly 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 to have such rounded corners, you can also make an ellipse. Set two parameters for the radius, 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>

The 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

[Related recommendations]

1. Free css online video tutorial

2. css Online Manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Share an article using CSS3 to achieve concave rounded corners effect code. For more information, please follow other related articles on the PHP Chinese website!