Explication détaillée de la façon d'obtenir des coins arrondis concaves en CSS3

Tout le monde doit être capable de faire des coins arrondis, bordure-rayon, comment réaliser des coins arrondis concaves ? Cet article présente principalement l'exemple de code pour réaliser des coins arrondis concaves en CSS3. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela aidera tout le monde.

Vous pouvez utiliser une boîte ronde blanche pour couvrir la majeure partie de la boîte carrée, mais celle-ci est opaque. Lorsque l'arrière-plan change, vous devez changer la couleur de la boîte de recouvrement, ou l'arrière-plan est un dégradé, ce qui est le cas. est plus difficile à changer, ou l'arrière-plan est une image, etc., cette méthode a des limites. Pour parler franchement, une fois la partie recouverte opaque, l'adaptabilité n'est pas forte.

Nous introduisons ici un congé concave utilisant un dégradé radial, qui peut résoudre les problèmes ci-dessus. Vous pouvez utiliser CSS pour générer un congé concave avec un arrière-plan transparent.

1. Dégradé linéaire de base

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

2.Ajouter un pourcentage pour ajuster la plage de dégradé

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

3. Concentrez la plage de dégradés jusqu'à ce qu'ils se chevauchent, formant deux blocs de couleur séparés par du rouge et du bleu

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

4. La couleur peut être définie sur transparent. Si vous changez le rouge en transparent, vous ne pouvez voir que les blocs de couleur bleus.

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

<p></p>

5. Pensez au dégradé radial de la même manière, réduisez également le cercle de dégradé jusqu'à ce qu'il se chevauche et définissez la couleur à proximité. le centre du cercle à transparent.

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

6. Le dégradé radial peut définir la position centrale du rayon du cercle, alors réglez-le sur le coin supérieur gauche et ajustez le taille du rayon en haut à gauche 200px, j'ai trouvé que les coins arrondis concaves avec fond transparent étaient réalisés.

Vous pouvez utiliser des pseudo-éléments lors de l'application, puis utiliser le positionnement absolu, ajuster la position et la combiner pour obtenir l'effet souhaité

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

7. De la même manière, ajustez simplement la position centrale du cercle

 /* 左上 */ 
.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>

De même, je ne le fais pas. Je ne veux pas faire cela. Les coins arrondis peuvent également être elliptiques et le rayon est défini sur deux paramètres, ce qui est une ellipse.

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

Le dégradé radial comporte de nombreux paramètres que vous pouvez essayer d'ajuster vous-même. Diverses formes étranges peuvent apparaître, qui ne seront pas démontrées ici. Relativement parlant, des coins arrondis concaves suffisent.

Recommandations associées :

Comment créer des coins arrondis en CSS3

Utilisez habilement le code CSS pour créer un tableau arrondi

Un résumé de la façon d'utiliser les coins arrondis et les bordures arrondies CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!