Wie erstelle ich mithilfe von CSS3-Transformationen abgeschrägte Ecken auf einem Blockteil?

Abgeschrägte Ecken auf einem Block-Div gestalten

Im bereitgestellten HTML-Dokument ist ein Standard-Block-Div mit einem durchgezogenen Rand definiert. Das Ziel besteht darin, einen abgeschrägten Eckeneffekt auf der rechten Seite des Div zu erzeugen.

Um diesen Effekt mit CSS3 zu erzielen, wäre die Eigenschaft „border-corner-shape“ die ideale Lösung. Allerdings wird es noch nicht von allen Browsern vollständig unterstützt. Ein alternativer Ansatz, der CSS3-Transformationen nutzt, bietet eine Problemumgehung:

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>

Dieser Ansatz beinhaltet das Hinzufügen eines zusätzlichen div als Nachelement von .box. Dieses Div wird absolut über dem .box-Element positioniert, mit einer schrägen Transformation, um den abgeschrägten Effekt zu erzeugen.

Weitere Illustrationen finden Sie in der JSBin-Demo in der Antwort. Beachten Sie, dass das Beispiel auch eine weitere div-Klasse (Box2) enthält, die eine alternative Implementierung ohne CSS3-Deklarationen demonstriert.

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