Jörg Marzinzick

Im Entenpfuhl 3
34630 Gilserberg
Handy: 0152 2752 4177
E-Mail: j.marzinzick@googlemail.com
joerg-marzinzick.de
html5 und css3 spielereien
Im Entenpfuhl 3 34630 Gilserberg
Prev 1. 1 ... ... 2 3 4 5 6 7 7. Next >>

Dreiecke

Dreiecke

Dreieckige Elemente sind auch auf modernen Websites immer noch ein Hingucker, zur Erzeugung solcher Effekte sind keine aufwendigen Skripte oder Bildersetzungsverfahren nötig, dies ist allein mit HTML5 und css3 möglich. Dazu erzeugt man ein Blockelement mit der Breite und Höhe von jeweils 0px. Notiert man nun Rahmenlinien mit einer definierten Dicke auf zwei beziehungsweise drei Seiten, entsteht durch dieses Zusammenspiel ein Dreieck. Bei zwei rechtwinklig angeordneten Rahmenlinien in der eingeschlossenen Ecke, bei drei Rahmenlinien liegt das entstehende Dreieck mit seiner Basis an der von den flankierenden Rahmenlinien eingeschlossenen Rahmenlinie.

Definieren der Klasse

div.dreieck-oben-links {
 	width: 0;
	height: 0;
	border-left: 100px solid #ff0000;
	border-bottom: 100px solid #00ff00;
}

	oder:

div.dreieck-oben-links {
 	width: 0;
	height: 0;
	border-top: 100px solid #ff0000;
	border-right: 100px solid #00ff00;
}
Das Ergebnis stellt sich wie folgt dar:
Dreieck oben links
Dreieck oben links
Wird nun der Hintergrund einer Rahmenlinie auf denselben Wert wie der Hintergrund des umgebenden Elements gesetzt, bleibt ein dreieckiges Element. Man kann den Hintergrund wahlweise auch auf transparent setzen.
Dreieck oben links
Dreieck oben links
Nun wird für das umschliessende Element position: relative; gesetzt und für das eingeschlossene Element position absolute; notiert. Mittels top: 0;, right: 0;, bottom: 0;, und left: 0; kann das "Dreieck" in eine der vier Ecken des umschliessenden Containers geschoben werden.

Definieren der Klasse

css3 - Code

    umschliessendes Element:

div.box-2d {
	clear: left;
	position: relative;
	width: 90%;
	height: 200px;
	background-color: rgba(241, 241, 241, 1.0);
	margin: 10px 5%;
}

    Dreiecke:

div.box-2d p.lo {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 100px solid #ffcc00;
	border-right: 100px solid transparent;
}
div.box-2d p.ro {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 100px solid #ffcc00;
	border-left: 100px solid transparent;
}
HTML5 - Code:
	<div class="box-2d">
		<p class="lo"> </p>
		<p class="ro"> </p>
	</div>
Wiederum eine Darstellung des Ergebnisses:

Wird anstatt des Deiecks ein Container verwendet, dem als background: ; ein Gradient beigefügt wird, entsteht ein noch stärkerer Effekt. Dieser kann nochmals gesteigert werden, wenn die Größe der Ecke mit einer transition: ; animiert wird.
Paper Curl links oben
Paper Curl rechts oben
Paper Curl links unten
Paper Curl rechts unten
Weitere Beispiele. Dreiecke aus den Ecken kommend.

Dreieck links oben

Dreieck rechts oben

Dreieck links unten

Dreieck rechts unten
Dreiecke mit der Basis zu einer Seite.

Dreieck Basis oben

Dreieck Basis rechts

Dreieck Basis unten

Dreieck Basis links
Hier gehts weiter.
Prev 1. 1 ... ... 2 3 4 5 6 7 7. Next >>