Wie erstelle ich eine schräge Ecke auf einer CSS-Box?

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 unter Verwendung von Rändern

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

<code class="HTML"><div class="cornered"></div>
<div class="main">Hello World</div></code>

<code class="CSS">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

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

Alternative Methode mit Transparenz

Um Text innerhalb des schrägen Teils zu ermöglichen, kann ein zusätzlicher transparenter Rand verwendet werden. Der untenstehende modifizierte Code veranschaulicht diesen Ansatz:

<code class="HTML"><div class="outer">
  <div class="cornered">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.</div>
  <div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div></code>

<code class="CSS">.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;
}</code>

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine schräge Ecke auf einer CSS-Box?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!