Kann CSS „Clip-Path' nur drei linke Ecken einer Form abrunden?

So runden Sie drei linke Ecken nur mit CSS-Clip-Path ab

Das Erstellen von Formen mit CSS-Clip-Path kann eine vielseitige Möglichkeit sein, verschiedene Designs zu erzielen. Das Abrunden bestimmter Ecken kann jedoch eine Herausforderung sein. In diesem Artikel geht es um das Abrunden der drei Ecken ganz links einer benutzerdefinierten Form.

Problem:
Beachten Sie den folgenden HTML- und CSS-Code:

<div></div>

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

Dieser Code erstellt eine Form mit scharfen linken Ecken und abgerundeten rechten Ecken. Um gezielt nur die drei Ecken ganz links abzurunden, müssen wir die Eigenschaft „clip-path“ ändern.

Lösung:
Um den gewünschten Effekt zu erzielen, können wir die Funktion „inset()“ verwenden. Funktion mit der Round-Eigenschaft:

-webkit-clip-path: inset(0% 45% 0% 45% round 10px);
clip-path: inset(0% 45% 0% 45% round 10px);

Mit der Funktion inset() können wir den Prozentsatz der Form angeben, der in jeder Richtung ausgeblendet werden soll, und die Round-Eigenschaft erzeugt abgerundete Kanten. Indem wir der runden Eigenschaft einen Radius von 10 Pixel zuweisen, runden wir die Ecken oben links, unten links und unten in der Mitte ab.

Mit dieser Lösung wird effektiv eine Form mit abgerundeten drei Ecken ganz links erstellt, während die scharfen rechten Ecken erhalten bleiben .

Das obige ist der detaillierte Inhalt vonKann CSS „Clip-Path' nur drei linke Ecken einer Form abrunden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!