Do you know how to use css to achieve concave rounded corners?-CSS Tutorial-php.cn

Do you know how to use css to achieve concave rounded corners?

王林

Release： 2020-11-04 16:37:03

forward

2290 people have browsed it

Do you know how to use css to achieve concave rounded corners?

This article uses radial gradient to achieve concave rounded corners with a transparent background.

(Video tutorial recommendation: css video tutorial)

Basic linear gradient

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

<div>从左到右的红到蓝渐变</div>

Copy after login

Add percentage to adjust the gradient range

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

<div></div>

Copy after login

Concentrate the gradient range until they overlap, forming two color blocks separated by red and blue

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

<div></div>

Copy after login

The color can be set to transparent color, transparent, change red to transparent color, you can see only blue The color is blocked

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

<div></div>

Copy after login

Similarly to the radial gradient, the gradient circle is also narrowed until it overlaps. The color near the center of the circle is set to transparent

/* 径向渐变主体 */
.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

<div class=&#39;raidal&#39;></div>

Copy after login

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 to 200px, and you will find that the concave rounded corner with a transparent background is achieved.

When applying, you can use pseudo elements to set, and then use absolute positioning, adjust the position of the child and the father, and combine it into the desired effect

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

<div class=&#39;raidal1&#39;></div>

Copy after login

Similar to the four directions, adjust the center position of the circle, that is But

/* 左上 */
.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%);
}

<div class=&#39;raidal1&#39;></div>
<div class=&#39;raidal2&#39;></div>
<div class=&#39;raidal3&#39;></div>
<div class=&#39;raidal4&#39;></div>

Copy after login

Similarly, if you don’t want the corners to be so rounded, you can also make them elliptical. Set two parameters for the radius, which is an ellipse.

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

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}

<div class=&#39;ellipse&#39;></div>

Copy after login

Related recommendations:CSS tutorial

The above is the detailed content of Do you know how to use css to achieve concave rounded corners?. For more information, please follow other related articles on the PHP Chinese website!