Wie erstelle ich eine abgeschrägte Box in CSS?

Abgeschrägte Box in CSS

Das Erstellen einer Box mit abgeschrägten Ecken in CSS ist eine häufige Anforderung. Die Schwierigkeit, diesen Effekt zu erzielen, hängt von der Größe der Fase ab.

Für kleinere Abschrägungen können Sie das Box-Shadow-Attribut verwenden. Für größere Fasen sind komplexere Techniken erforderlich.

CSS-Polygone verwenden

Die Polygoneigenschaft wurde in CSS3 eingeführt, was das Erstellen von Abschrägungen erheblich vereinfacht. Mithilfe von Polygonen können Sie eine benutzerdefinierte Form angeben, die Abschrägungen enthält.

<code class="css">.cornered {
  width: 160px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0 0, 0 40px, 40px 80px, 80px 0);
}</code>

Verwenden Sie einen transparenten Rand

Eine andere Möglichkeit besteht darin, einen transparenten Rand zu verwenden. Sie können einen abgeschrägten Effekt erzeugen, indem Sie einen transparenten Rand in einem Container mit einer Hintergrundfarbe platzieren.

<code class="css">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid transparent;
}

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Diese Methode eignet sich zum Erstellen kleinerer Abschrägungen und ist besonders nützlich, wenn Sie mit Text arbeiten.

Verwendung von Bibliotheken von Drittanbietern

Es gibt auch viele Bibliotheken von Drittanbietern, die zum Erstellen von Kartons mit abgeschrägten Ecken verwendet werden können. Diese Bibliotheken bieten praktische Möglichkeiten, diesen Effekt zu erzielen, ohne selbst CSS schreiben zu müssen.

Einige beliebte Bibliotheken sind:

• [Slantastic](https://meyerweb.com/eric/css/edge/slantastic/)
• [Trianglify ] (https://github.com/qrohlf/trianglify)
• [Polygon](https://github.com/polygonjs/polygon.js)

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine abgeschrägte Box in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!