CSS Slants Kanten abschrägen

Mit Cascading Style Sheets (CSS) in HTML Kanten von Objekten abschrägen und abrunden.



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