Schneiden Bild Diagonal mit CSS
, Wie Sie abgeschnitten Teil des Bildes im container oder Diagonal mit CSS?
Den Teil, der muss weggeschnitten werden, hat die form eines Dreiecks
Um genauer zu sein: wenn das Bild oben ist das Bild, das Blaue Teil sollte raus geschnitten werden, nicht das gelbe
Den html sein sollte:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>
oder:
<div class="container">
content
</div>
Es ist aus meiner eigenen Untersuchung eine Menge von Möglichkeiten, dies zu tun, aber die meisten von Ihnen ist hacky, so der Suche nach einem best-Ansatz
Min unterstützte browser: IE11, aktuellen webkits etc.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden CSS3
-clip-path
undpolygon
wie diese. Sie können festlegen, welchen Weg Sie wollen.CSS:
HTML:
http://jsfiddle.net/r3p9ph5k/
Für einige zusätzliche bits, möchten Sie vielleicht werfen Sie einen Blick auf z.B. diese. Auch für weitere Informationen über IE, siehe diese.
Könnte man eine
pseudo element
, kombiniert mitoverflow:hidden;
Ergebnis
CSS:
HTML:
Dieser ist ein wenig schmutzig, aber... Hier ist die Idee :
HTML:
CSS:
HTML:
Hinweis: eine Andere Methode könnte sein, mit einem pseudo-element zu maskieren das Bild, aber nicht ein wirklicher "Schnitt", wo Sie sollten in der Lage sein, durch zu sehen.
Nur eine Idee:
HTML
CSS
Demo
Versuchen Sie bevor Sie kaufen
Können Sie mit http://cssplant.com/clip-path-generator für diese.
Ist es nur eine "dirty solution", die beste Möglichkeit ist die Platzierung eines svg über die img.
Vielleicht in eine Zukunft, die "clip css-Eigenschaft" unterstützen würde, eine andere Art von Formen als nur "rect" und Dinge wie dieses getan werden könnte!
Anderen "schmutzigen Weg" ist, indem ein div über der img, mit der hintergrund-Farbe, die Sie wollen, und drehen Sie es!