Abgeschnittene / schräge Ecken mit CSS realisieren
von Oliver Richter (Kommentare: 8)
Wie lassen sich (nur) mit CSS und ohne Verwendung von Grafiken abgeschnittene / schräge Ecken von Block-Elementen realisieren?
Neulich sollte für einen Kunden ein viereckiges grafisches (Block-)Element umgesetzt werden, welches eine abgeschnittene Ecke aufweist. Generell und vor allem da dieses Element immer wieder und in verschiedenen Größen vorkam, lag es nahe, das Element mit der abgeschnitten Ecke rein mit HTML und CSS und ohne die Verwendung von Grafiken umzusetzen - um möglichst flexibel und anpassbar für jeden Fall zu bleiben.
Im Netz fand ich dazu folgenden Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div.test1 {
height: 200px;
background: #d15e00;
position: relative;
}
div.test1:before {
width: 0;
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 50px solid #ffffff;
border-left: 50px solid #d15e00;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>Hinweise: Quelle unter: http://forum.wpde.org - der Quellcode wurde jedoch vom Autor dieses Artikels für die Darstellung hier modifiziert, die Methode blieb erhalten.
Das Ganze sieht so aus:
Soweit schon mal gut und ausreichend für meinen Fall.
Mir kam dann aber noch die Idee, dass man auch ein um 45 Grad rotiertes Viereck in einer Ecke mit absoluter Positionierung zur Hälfte außerhalb des Block-Elementes platzieren könnte. Das Block-Element selbst müsste dann mit der CSS-Eigenschaft overflow: hidden; ausgestattet werden, um das überstehende Element einfach abzuschneiden.
Hier der Quellcode dazu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gruenfisch Webdesign</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div.test2 {
height: 200px;
background: #d15e00;
position: relative;
overflow: hidden;
}
div.test2:before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 80px;
height: 80px;
background: #ffffff;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="test2"></div>
</body>
</html>Das zweite Beispiel sieht so aus:
Auch das wäre eine Lösung (und ich bin ganz sicher nicht der erste, der sie formuliert). Die erste Lösung ist allerdings wahrscheinlich günstiger, da die CSS-Eigenschaft transform: rotate(45deg); aktuell nicht in alten Browsern funktioniert. Und zudem lassen sich dort verschiedene Möglichkeiten mit Schatten über CSS leicht umsetzen und die Berechnung der Größe der abgeknickten Ecke ist einfacher in Pixeln zu bestimmen.
Hier noch mal alle beiden Varianten und die erste Variante mit einem Schatten. Das Beispiel kann als HTML-Datei am Ende dieses Artikels herunter geladen werden.
Ergänzung:
Um dass das zweite Beispiel beim Einsatz der Transform-Anweisung auch in älteren Browsern und z.B. zur Zeit (März 2014) auch im Safari läuft, können die Vendor-Prefixes verwendet werden in der Transform-Anweisung, sonst sieht das Ganze etwas unschön aus (vielleicht auch ein Grund, um doch auf das erste Beispiel zurück zu greifen):
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);Das zweite Beispiel mit dem rotierten Viereck funktioniert auch leider nicht im Opera-Mini.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben
Kommentar von Steffen |
und nun packe mal bitte ein hintergrundgrundbild rein oder dahinter, oder versuche ein rand zu setzen ... sieht blöd aus oder geht garnicht.
warum die runde ecken aber keine abgeschrägten in css eingebaut haben ist ein rätzel ...
Kommentar von Sebastian |
Nette Spielerei! Grafiken braucht man immer weniger, einfach klasse!
Kommentar von Alex |
Hallo,
genau danach habe ich gesucht...allerdings enttäuschend, dass Du selber hier dann Grafiken benutzt hast ;)
Hätte es mir live im Einsatz gewünscht.
Beste Grüße,
Alex
Kommentar von Raphael |
Das ist zwar nett, aber in der Praxis nicht wirklich zu gebrauchen. Sobald sich die Hintergrundfarbe ändert, muss man auch die Farbe des kleinen Quadrats anpassen. Und mit einer Hintergrundgrafik geht es leider gar nicht. Für einfache Seiten ok, sonst in meine Augen eher nicht. Trotzdem danke. Jede Anregung hilft weiter.
Kommentar von Inge Held |
Ein transparentes gif laesst doch den Hintergrund zu. Wo also ist das Problem?
Antwort von Oliver Richter
Hallo Inge, wie oben im Titel geschrieben, ging es hier darum, es ohne Grafik und nur mit Stylesheets zu realisieren.
Kommentar von Kati |
Super danke, hatte schon alles andere ausprobiert ;)
Antwort von Oliver Richter
Danke
Kommentar von Webdesigner Lüneburg |
Lieben Dank!
Kommentar von Cowe Webdesign |
Guten Tag
Ich bedanke mich für diesen Beitrag und wünsche weiterhin viel Erfolg.
Grüsse
Silvester
Antwort von Oliver Richter
Besten Dank