Erstellen einer schrägen Ecke auf einer CSS-Box

Das Erzielen einer schrägen Ecke auf einer CSS-Box kann mit verschiedenen Methoden erreicht werden. Ein Ansatz wird unten beschrieben:

Methode mit Rändern

Diese Technik basiert auf der Erstellung eines transparenten Randes entlang der linken Seite eines Containers und eines schrägen Randes entlang der Unterseite . Der folgende Code zeigt, wie dies implementiert wird:

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

Dadurch entsteht ein Kasten mit einer schrägen oberen linken Ecke in einem 45-Grad-Winkel.

Alternative Methode mit Transparenz

An Wenn Sie Text innerhalb des schrägen Teils zulassen, kann ein zusätzlicher transparenter Rand verwendet werden. Der untenstehende modifizierte Code veranschaulicht diesen Ansatz:

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Diese Methode erstellt einen schrägen Rahmen, der entlang seiner Länge Text anzeigen kann.