Affichage du code : utilisation de CSS3 pour obtenir 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 bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un oeil

Le congé, tout le monde doit pouvoir le faire, bordure-rayon, comment réaliser un congé concave ?

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 signifie. 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.

Lors de l'application, vous pouvez utiliser des pseudo-éléments, puis utiliser un 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. Comme pour les quatre directions, 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>

8. je ne veux pas faire ça. 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, les coins arrondis concaves suffisent

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!