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

Anwenden einer schrägen Ecke auf eine CSS-Box

Um einen optisch auffälligen Effekt zu erzielen, ist es manchmal wünschenswert, eine schräge Ecke in eine CSS-Box einzuführen. Dadurch kann ein einfaches Rechteck sofort in ein dynamisches und auffälliges Element verwandelt werden.

Erstellen einer Cut-Corner-Box

Für Browser, die CSS3 unterstützen, bietet die Polygoneigenschaft eine leistungsstarke Lösung für diese Herausforderung . Für eine breitere Browserkompatibilität ist jedoch möglicherweise die Slantastic-Technik (http://meyerweb.com/eric/css/edge/slantastic/demo.html) eine bessere Alternative.

Implementierung Slantastic

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

CSS:

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

.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

Zusätzliche Optionen

Zu Wenn Sie eine Ecke mit transparenten Rändern und Text erstellen möchten, können Sie die folgende Alternative implementieren Ansatz:

HTML:

<div class="outer">
    <div class="cornered">It's possible to put text up here, too...
    </div>
    <div class="main">Hello hello hello hello
    hello hello hello hello hello</div>
</div>

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

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