Wie erreicht man mit CSS3-Transformationen abgeschrägte Ecken an einem Block-Div?

Abschrägen der Ecken eines Block-Divs mit CSS3

Das Erreichen abgeschrägter Ecken auf einem Block-Div war einst eine Herausforderung, bevor CSS4s Border-Corner- Formeigenschaft. Mit CSS3-Transformationen können wir diesen Effekt jedoch erzeugen und gleichzeitig die Rahmeneigenschaft für zukünftige Verwendungen beibehalten.

Lassen Sie uns eine HTML-Struktur und CSS-Stile untersuchen, um abgeschrägte Ecken zu erstellen:

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>

CSS:

<code class="css">.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Im CSS-Code verwenden wir ein Pseudoelement, um die abgeschrägte Ecke zu erstellen. Dieses Pseudoelement ist absolut positioniert und hat einen negativen Z-Index, um sicherzustellen, dass es hinter dem Haupt-Div bleibt. Die skew()-Transformation wird angewendet, um die Ecke zu drehen.

Es ist wichtig zu beachten, dass die Eigenschaft „border-right“ auf 0 gesetzt ist, um die Illusion einer abgeschrägten Ecke zu erzeugen. Die Eigenschaft „border-left“ des Pseudoelements wird ebenfalls auf 0 gesetzt, um eine optisch saubere Ecke zu gewährleisten.

Diese Technik fügt Block-Divs effektiv abgeschrägte Ecken hinzu und ermöglicht so optisch ansprechendere Designs.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS3-Transformationen abgeschrägte Ecken an einem Block-Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!