Hallo,
ich habe leider nirgends eine Anleitung gefunden wie ich ein Bild ohne es zu verzerren abschnittsweise anzeigen lassen kann.
Und zwar wie auf meinem Anhang dargestellt in Rautenform. Dazu müsste man ja nicht nur 4 Koordinaten angeben, sondern 8 oder?
Vielleicht weiß ja jemand die Lösung, wie ich das mit CSS umsetze 
Vielen Dank schon mal!
Grüße
Domefreak 
du könntest mit css3 Dein bild drehen,
transform: rotate(45deg);Ich weis aber nicht auf was sich dann die Schnitt, werte beziehen, warscheinlich immernoch auf das bild..
Hmm gedreht soll es ja nicht werden Nur einen Ausschnitt aus dem Bild soll angezeigt werden,
glaub das ist garnicht so einfach wie ich mir das vorgestellt habe 
Willst du das Bild mehrfach verwenden? Wenn nein, schneide es dir doch am Anfang per GIMP oÄ zu, dann hast du den netten Nebeneffekt, dass das Bild kleiner ist und dementsprechend schneller geladen.
Ansonsten hilft dir vielleicht transform: skew weiter. Entweder das Bild selbst verzerren, oder vor und hinter das Bild zwei divs setzen und per skew schräg über das Bild legen. Wäre so die Idee, die mir kommen würde...
Oder per Klasse, zb <img class="raute" ...> und dann im CSS
.raute:before:after {
position:absolute;
width: 10px; /* width und height musst du rumprobieren, was klappt */
height: 100%;
background-color: inherit; /* Sollte die Hintergrundfarbe des Elternelements sein */
transform: skew(170deg);
}keine Garantie, dass es klappt!!!
Update: Das W3C selbst gibt einem ein Beispiel, dass :before oder :after Selektoren auch bei Bildern funktionieren SOLLTEN. Allerdings unterstützt dies kein aktueller Browser 
Damit ist mein obiger Vorschlag hinfällig. Klasse Aktion, ihr Browser 
Du könntest beim hover mit JS die src des Bildes verändern, so dass dann ein anderes (großes) angezeigt wird.
Vorher und danach nur dein Abschnitt Bild zeigen.
Hier ein erster Versuch meiner Wenigkeit: http://jsfiddle.net/mxK6V/2/
Sie liegen schonmal schräg nebeneinander, nur das Überschneiden krieg ich noch nicht gebacken 
Ich hatte die Idee, das per div mit overflow: hidden zu lösen, das Problem: auch bei z-index: 2 bleibt das Zeug versteckt, siehe Schnipsel.
Vielleicht hat ja wer anders ne Idee...
So, ich habe jetzt meine Idee etwas ausgebaut. Da die Browser ein :before und :after direkt bei Bildern nicht unterstützen, (obwohl W3C sogar ein Beispiel dafür bringt 
), hier mal mit divs rund ums Bild. Ich hoffe, es ist ok so: http://jsfiddle.net/Rcu3T/1/
clip-path sollte das was du brauchst sein ..
beispiel hier: http://jsfiddle.net/wolfwortmann/Rcu3T/4/
img{
/* Firefox */
clip-path: url("#clipPolygon");
/*angeblich Safari - Chrome */
-webkit-clip-path: polygon(35px 100px,100px 100px,70px 0px,0px 0px);
}<img src="bild.png">
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="35 100,100 100,70 0,0 0">
</polygon>
</clipPath>
</svg>gerne, man kann damit voll viel blödsinn machen, ist mir so nebenbei aufgefallen
Na klar tuts firefox!!
Einmal id's überprüfen..
Aber bei meinem Beipiel bin ich mir sicher das es geht, hab es ja mit FF gemacht..
Seit wann gibt es denn clip-path, und wieso liest man nirgendwo davon. 
Es hat mich sowieso schon gewundert, dass CSS3 an alles gedacht hatte, sogar Animationen, aber ein bisschen schraeg rumschnippeln nicht unterstuetzen soll... Coole Sache, wieder was gelernt
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!