Vor einiger zeit habe ich hier, hier, hier und hier ein paar Blogbeiträge dazu verfasst, wie mit CSS die verschiedensten Formen gestaltet werden können.
Der Nachteil dieser Formen: Sie waren einfarbig.
Nun habe ich mal etwas rumgespielt und habe einen Weg gefunden, wie Sechsecke Bild gestaltet werden können.
Das Ergebnis: sechseckige Bilder mit CSS
Der Code:
<div class="image-container img1"><span class="outer-image">
<span class="inner-image">
<img src="http://mm-creative.de/wp-content/uploads/2013/02/bulli-003-900x562.jpg" alt="test1" />
</span>
</span></div>
CSS
.image-container {
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
overflow: hidden;
width: 400px;
height: 225px;
margin: 0;
float: left;
position: relative;
}
.image-container * {
overflow: hidden;
}
span.outer-image {
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 400px;
height: 225px;
display: block;
position: absolute;
left: 0px;
top: 0px;
}
span.inner-image {
transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-webkit-transform: rotate(-120deg);
display: block;
width: 400px;
position: absolute;
height: 225px;
left: 0px;
top: 0px;
}
img {
display: block;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
margin: 0 auto;
width: 600px;
position: absolute;
left: -135px;
top: -100px;
border-radius: 10px
}
Wie es geht: sechseckige Bilder mit CSS
Wichtig ist, dass es 4 Container sind.
Ich habe mich für ein DIV, zwei SPAN und ein IMG entschieden. Das schien mir in dem Fall am sinnvollsten. Das IMG könnte man theoretisch durch ein weiteres SPAN mit Hintergrundbild ersetzen.
Das außenliegende DIV ist für die Platzierung des Containers an der passenden Stelle. Das macht gerade bei Galerien viel Sinn. So besteht die Möglichkeit ein Wabengitter mit CSS zu erstellen. In meinem Bespiel habe ich mich für 6 Bilder entschieden.
Dann kommen die eigentlichen wichtigen Elemente: die SPAN-Container. Das erste SPAN(.outer-image) wird um 60° gedreht, das zweite SPAN(.inner-image) wird um 120° in die entgegengesetzte Richtung gedreht. Und zum Schluss noch das IMG, das wird wiederrum um 60° in die entgegengesetzte Richtung des zweiten SPAN(.inner-image) gedreht. Nun steht das Bild wieder bei 0° und somit gerade.
PS: Im Laufe der nächsten Wochen werde ich genau dieses Gebilde in einem neuen Projekt verwenden. Es bleibt also spannend. ^^
Danke fürs lesen und das Interesse. Bei Fragen oder Anregungen steht wie immer die Kommentarfunktion zur Verfügung.
