Savez-vous comment utiliser CSS pour obtenir des coins arrondis concaves ?

Cet article utilise des dégradés radiaux pour obtenir des coins arrondis concaves avec un fond transparent.

(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)

Dégradé linéaire de base

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

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

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

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

<div></div>

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

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

<div></div>

La couleur peut être définie sur la couleur transparente, transparente, changez le rouge en couleur transparente, vous ne pouvez voir que le bleu La couleur est bloquée

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

<div></div>

De la même manière que le dégradé radial, le cercle de dégradé est également rétréci jusqu'à ce qu'il se chevauche. La couleur près du centre du cercle est définie sur transparente

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

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

Le dégradé radial peut. définissez la position centrale du rayon du cercle, alors réglez-le sur le coin supérieur gauche, ajustez le rayon supérieur gauche à 200 px et vous constaterez que le coin arrondi concave avec un fond transparent est obtenu.

Lors de l'application, vous pouvez utiliser les paramètres de pseudo-éléments, puis utiliser le positionnement absolu, ajuster la position et la combiner dans l'effet souhaité

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

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

De la même manière pour les quatre directions, ajustez le centre position du cercle, c'est-à-dire Mais

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

De même, si vous ne voulez pas avoir de tels coins arrondis, vous pouvez également le rendre elliptique. Définissez deux paramètres pour le rayon, qui est une ellipse.

Le dégradé radial possède 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

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

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

Recommandations associées : Tutoriel CSS

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!