Wissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?

Dieser Artikel verwendet einen radialen Farbverlauf, um konkav abgerundete Ecken mit einem transparenten Hintergrund zu erzielen.

(Empfohlenes Video-Tutorial: CSS-Video-Tutorial)

Grundlegender linearer Farbverlauf

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

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

Prozentsatz hinzufügen, um den Farbverlaufsbereich anzupassen

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

<div></div>

Verdichten Sie den Farbverlaufsbereich, bis sie sich überlappen und zwei Farbblöcke bilden, die durch Rot und Blau getrennt sind

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

<div></div>

Die Farbe kann auf transparente Farbe eingestellt werden. Wenn Sie die rote Farbe in eine transparente Farbe ändern, können Sie nur den blauen Farbblock sehen Nahe der Mitte des Kreises. Auf transparent setzen

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

<div></div>

Der radiale Farbverlauf kann die Mittelposition des Radiuskreises festlegen. Stellen Sie ihn also auf die linke obere Ecke ein, passen Sie die Radiusgröße links oben auf 200 Pixel an, und Sie werden feststellen, dass die Es entsteht eine konkav abgerundete Ecke mit transparentem Hintergrund.

Sie können beim Anwenden Pseudoelementeinstellungen verwenden und dann die absolute Positionierung verwenden, die Position anpassen und sie zum gewünschten Effekt kombinieren.

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

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

Ähnlich wie bei den vier Richtungen müssen Sie einfach die Mittelposition des Kreises anpassen , Ich möchte das nicht tun Abgerundete Ecken können auch elliptisch sein, und der Radius ist auf zwei Parameter eingestellt, was einer Ellipse entspricht.

Der radiale Farbverlauf verfügt über viele Parameter, die Sie selbst anpassen können. Es können verschiedene seltsame Formen auftreten, die hier nicht gezeigt werden. Relativ gesehen reichen konkav abgerundete Ecken aus

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

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

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonWissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!