So erstellen Sie ein Polygon Shape div
Ich möchte hier HTML-Element wie auf Bild erstellen:
Ein Problem ist, dass das DIV-Element Polygonform anstelle von regulärem Rechteck hat, über anderen Elementen als etwas wie Popup platziert wird und innerhalb dieses Elements ein Bild mit rechteckiger Form in der Quelle gezeigt werden muss, aber im Web wie das Füllen aller angezeigt wird Leerzeichen enthalten Dreieck auf der linken Seite.
Glaubst du, gibt es irgendeine Möglichkeit, das zu erkennen, ohne Bilder als transparente PNGs im richtigen Polygon-Format darzustellen? Nur von CSS3 transformieren oder Leinwand oder SVG verwenden?
2 Antworten
Eine Methode könnte sein, das Bild in zwei Container zu teilen, die 50% der Größe des Elternteils haben, jeden einzeln zu transformieren und die Hintergründe so zu positionieren, dass sie aussehen wie ein einziges Bild. Die Transformation könnte entweder ein Skew (in der Antwort verwendet) oder eine Perspektive-basierte Rotation sein.
Beachten Sie, dass wir, da wir den Container transformieren, den umgekehrten Effekt auf das tatsächliche Bild anwenden müssen, damit es normal aussieht.
Ich wollte die Verwendung von SVG und clipPath vorschlagen, aber da Persijn dieses Beispiel bereits gepostet hat, habe ich unten eine andere Version mit polygon hinzugefügt.
SVG
Lösung gefunden von Jbutler438
mit einem clip-path und Bild-Tag in Svg können Sie leicht eine Pfeilform an der Vorderseite ausschneiden.
Tags und Links html css svg css3 css-shapes