Wie können Sie in CSS abgeschrägte Ecken für Block-Divs erstellen, ohne border-corner-shape zu verwenden?

Abgeschrägte Ecken für Block-Divs in CSS erreichen

Die Aufgabe, ein Block-Div mit abgeschrägten Ecken zu stilisieren, kann auf verschiedene Arten angegangen werden . CSS4 border-corner-shape bleibt eine Option, die Implementierung steht jedoch noch aus. Daher beschäftigen wir uns mit einer Lösung mithilfe von CSS3-Transformationen.

Implementierung mithilfe von CSS3-Transformationen

Erstellen Sie im HTML-Dokument ein div-Element mit der gewünschten Klasse Name für den Block.

HTML:

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

Definieren Sie den Stil in CSS wie folgt:

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);
}

Diese Lösung behält die ursprüngliche Randeigenschaft bei und lässt sie für weitere Anpassungen verfügbar. Eine praktische Demonstration finden Sie in der bereitgestellten JSBin-Demo.

Alternative Lösung mit der zweiten Div

Betrachten Sie der Einfachheit halber eine andere CSS-Implementierung, die ähnliche Ergebnisse erzielt ein zweites Div ohne CSS3. Sehen Sie sich die Klasse box2 im zuvor bereitgestellten CSS an.

Das obige ist der detaillierte Inhalt vonWie können Sie in CSS abgeschrägte Ecken für Block-Divs erstellen, ohne border-corner-shape zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!