Wie erreicht man mithilfe von CSS3-Transformationen eine abgeschrägte Ecke in einem Blockteil?

Abschrägen der Ecke eines Block-Divs

Die Herausforderung

In einem HTML-Dokument, das ein Block-Div mit der Klasse „block1“ enthält, wird das Ziel ist es, eine abgeschrägte Ecke auf der rechten Seite des Div zu erstellen, wie im bereitgestellten Bild dargestellt.

Die Lösung

Um diesen Effekt zu erzielen, ohne die kommende CSS4-Rahmeneckenform zu verwenden Eigenschaft verwenden wir CSS3-Transformationen in Verbindung mit positionsbasierten Techniken.

Implementierung

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;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Erklärung

Diese Implementierung umfasst die folgenden Techniken:

• CSS3-Transformationen: Die Skew-Transformationseigenschaft wird angewendet auf Drehen Sie das angehängte Div um 45 Grad.
• Absolute Positionierung: Das angehängte Div wird mithilfe der Eigenschaften „oben“ und „rechts“ absolut positioniert, um die abgeschrägte Ecke zu erstellen.
• Negativ Z-Index: Das angehängte Div erhält einen negativen Z-Index, um es hinter das ursprüngliche Div zu bringen.
• Randmanipulation: Der rechte Rand des ursprünglichen Div wird auf Null gesetzt um einen zweiten Rand an der abgeschrägten Kante zu verhindern.
• Padding-Änderung: Um den entfernten 1-Pixel-Rand zu kompensieren, wird der Padding-Right des ursprünglichen Divs um 1 Pixel erhöht.

Das obige ist der detaillierte Inhalt vonWie erreicht man mithilfe von CSS3-Transformationen eine abgeschrägte Ecke in einem Blockteil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!