Loresoft Software - seitenartikel startseite CSS__Slants__Kanten_

Titel:	CSS Slants Kanten abschrägen
Beschreibung:	Mit Cascading Style Sheets (CSS) in HTML Kanten von Objekten abschrägen und abrunden.
Kategorie:	Programmierung
Unterkategorie	CSS (Cascading Style Sheets)
Benötigtes Fachwissen:	Fortgeschrittene Anfänger

Autor(en):	Joachim Ruf
Erstellt am:	14 November 2008
Letzte Änderung:	13 April 2009
Gelesen:	Artikel wurde bislang 576 mal gelesen
Artikel überarbeiten:	CSS Slants Kanten abschrägen
	Hat Ihnen die Seite weitergeholfen? sehr gut sehr schlecht

Abgeflachte Kanten mit CSS erstellen
Sind Sie auch der Meinung, dass grafische Objekte in HTML nicht ohne Grafiken realisiert werden können? Da liegen Sie leider falsch, denn mit CSS können sowohl Kanten von Objekten abgeflacht- als auch abgerundet werden, wobei letzteres nur unter Firefox und Netscape möglich ist. Das Zauberwort lautet hier >>Slants<<

Theorie
Um Objektkanten abzurunden, muss jedoch etwas in die Trickkise gegriffen werden, denn dies ist natürlich nicht serienmäßig in CSS eingebaut! Um also in HTML mit CSS Kanten abzuflachen, behelfen wir uns der Tatsche, dass die aneinander liegenden Ecken der einzelnen Linien in den Browsern nicht "glatt" abgschnitten zueinander angeordnet werden - sondern die Ecken der Linien schön im 45° Winkel gezeichnet werden. Somit ergibt sich unten stehendes Bild, wenn man die Umrandungsdicke des Objektes erhöht.

Kantendarstellung einer HTML-Div-Box

Vorgehensweise
Da wir nun wissen wie die vier Linien (Nord, Süd, Ost West) eines Objektes im Browser dargestellt werden, müssen wir zur Lösung unseres Problems lediglich:

1. die Kantenlinien entsprechend Dick zeichnen
2. alle Linien bis auf eine (oder zwei) ausblenden
3. die nun verbleibende Linie in der Höhe- und Breite anpassen

und schon haben wir ein grafisches Objekt mit abgeflachter Kante mit CSS realisiert!

Programmbeispiele

.kante_W {
	/* Linien formatieren */
	border-style: solid solid none none;
	border-color: #FFF #999 #FFF #999;
	border-width: 30px 30px;
	height: 0;
 
	 /* Gebilde nach links verschieben */
	float:left;
	overflow:hidden;
}

.kante_O {
	/* Linien formatieren */
	border-style: none solid solid none ;
	border-color: #FFF #999 #FFF #999;
	border-width: 30px 30px;
	height: 0;
 
	 /* Verschiebung nach unten*/
	margin-top: 30px;
	margin-left: -30px;
 
	 /* Gebilde nach links verschieben */
	float:left;
	overflow:hidden;
}

.kurve_W{
	/* Linien formatieren */
	border: solid 1px #999;
	border-width: 20px 20px;
	height: 0;
 
	 /* Gebilde nach links verschieben */
	float:left;
	overflow:hidden;
 
         /* Kanten abrunden */
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 20px;
}

<div class="kante_W"></div> kante_W
 
<div class="kante_O"></div> kante_O
 
<div class="kante_W"></div><div class="kante_O"></div> kante_W + kante_O
 
<div class="kurve_W"></div> Kurve (nur Firefox und Netscape)

kante_W

kante_O

kante_W + kante_O

kurve_W (nur Firefox und Netscape)

siehe auch:
CSS Haus von Chris Hester
CSS Kanten abrunden