unregelmäßige Polygone per CSS3?

kukki · Post by **kukki** » Sun 5. Oct 2014, 13:42

Ich habe nun den gesamten Sonntagvormittags damit verbracht, nach einer Lösung zu suchen, die es gestattet ein UNregelmäßiges Polygon mit CSS zu zaubern. Alles habe ich gefunden - regelmäßige Polygone in allen Ausführungen, wie Sterne, Quadrate und Rechtecke, Herzen und solchen Schnodder, aber ein einfaches Viereck mit ungleichlangen Seiten und beliebigen Winkeln .... dafür gibt es zwar eine JS-bibliothek, die will ich aber nicht benutzen, denn in diesem Polygon soll SEO-fähiger Text stehen, der ebenso noch per CSS gestaltet werden kann.

Hat jemand dafür schon mal eine Lösung gefunden oder gelesen?

So soll das fertige Teil in etwa aussehen:

Zur Zeit scheint es einfacher zu sein eine Grafik zu erzeugen und den Text darin zu platzieren - mag für eine einzige Anwendung gehen

, aber bei mehreren und verschiedenen Farben etc. und wegen der Änderungsmöglichkeiten, finde ich dass dann doch etwas aufwendiger.

Post by **Oliver Georgi** » Sun 5. Oct 2014, 17:17

Benutze SVG

Code: Select all

<!DOCTYPE html>
<html>
<body>
<svg width="600" height="850">
	<polygon fill="#E53425" stroke="#F4D915" stroke-width="7" stroke-miterlimit="10" points="365.956,214.647 102.164,279.016 61.041,257.272 391.5,122.835"/>
	<polygon fill="none" points="106.035,239.96 340.633,167.476 366.339,199.646 131.742,272.129 "/>
	<text transform="matrix(1.1939 -0.3689 0.6243 0.7812 125.8293 264.7303)">
		<tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="37.8827">Text verzerrt</tspan>
	</text>
</svg>
</body>
</html>

kukki · Post by **kukki** » Mon 6. Oct 2014, 10:25

Danke für die Mühe.
Das sieht als Standalone-Lösung gut aus, ist aber für den Fractionslider so leider nicht anwendbar, da ich nur über data-Parameter, und jetzt auch mit
class/ style=%%par1 par2...%% die Gestaltung/Transmission von Texten und fertigen Grafiken vornehmen kann. Daher meine intensive Suche nach einer CSS-Lösung, die wäre perfekt gewesen

phpspace · Post by **phpspace** » Thu 9. Oct 2014, 20:22

Es wird schwierig eine ordentliche Lösung für dein Problem zu finden. Genauso belastest du dann ganz schön den Client. Sollte der Client ein wenig schwach auf der Brust sein, dann bekommt er eventuell Geschwindigkeitsverluste beim Rändern der Seite. Wieso erstellst du nicht einfach immer eine Grafik? Was hast du denn eigentlich genau vor? Wie häufig möchtest du dein Polygone dann verwenden?

kukki · Post by **kukki** » Mon 13. Oct 2014, 10:00

Oh ha, ein Neuer hier im Board

Gegenstand meiner Anfrage war die Nutzung in diesem Slider, den ich bereits seit Dezember letzten Jahres als kostenlose Pluginerweiterung für unser CMS in Arbeit und step by step miitels nur von Boardmittelns des phpWCMS erweitert habe. Es gibt viele solcher Slider - Schrott als auch brauchbare Plugins (wie dieser hier). Dieser Fractionslider war relativ einfach einzubauen, ist aber nicht ganz so simpel bedienbar, mit ein wenig HTML-Kenntnis und CSS ist das aber schnell erledigt. Das Teil habe ich erweitert um einen Import aus anderen Websites und um multi-Klassen-Notationen bzw. von hand hinzugefügten style-Notationen und durch Erweiterung mit einem Hardwarezusatz (RaspbberryPi) und anderen Unix-Scripten kann ich diese Bildausgaben als onlineWerbung beliebig regionl auf irgendwelche erweiterte/ angeschlossenen TVs mit CEC-Stuerung aus Basis von Debian ausgeben - kein Flash, keine Videos, aktuell änderbar mit 15' refresh, SEO-freundlich, asynchron und synchron abspielbar.

Und dafür sollte halt ein CSS3 Polygon her, halt aber ein unrgelmäiges Viereck. Wenn's nicht geht, dann eben per Grafik, wollte ich aber vermeiden - siehe Slider-Demo

Old Boy · Post by **Old Boy** » Mon 13. Oct 2014, 17:20

Bei solchen Sachen frag ich mich immer ernsthaft: Verkaufe ich damit einen Kasten Bier mehr?

Meist komme ich schnell zu dem Schluss: NEIN... der Aufwand ist weit höher als der Nutzen!

Meine Entscheidung wird dadurch unterstützt, wenn ich mir Internetsites aus USA ansehe... fürchterliche "Optik", aber de machen damit trotzdem richtig Umsatz!

Also habe ich mich entschlossen, grundsätzlich den "einfacheren" Weg zu gehen und lasse möglichst solche "Spielereien" raus... macht nur Arbeit und der "Kunde, der Alles will" zahlt sowieso nix

Nach meiner bescheidenen Erfahrung bringt nur "vernünftiger Inhalt" wirklich was, da investiere ich lieber meine Zeit!
Und das bei einer möglichst idiotensicheren Navigation.

PS
Ich habe noch nie den Kunden gefragt: "Wie soll deine Site denn aussehen? "
Sondern immer: "Was willst du mit deiner Site erreichen?"

Dann hab ich das komplette Layout gemacht und voll funktionsfertig - per localhost auf dem laptop - vorgestellt.
95% aller Interessenten sagen spontan "JA!"
Die restlichen 5% übernehme ich nicht! Die "vergeblichen Arbeiten" kann ich später mal verwenden.

Mag vielleicht verrückt klingen, hat aber bisher wunderbar funktioniert.
Ich habe zwar vorher mehr Arbeit, aber anschliessend geht alles total easy, weil ich nicht an solchen "Problemen" rumknabbern muss!

Nein, das muss man nicht so machen... kann man aber mal versuchen, zumindest drüber nachdenken!

kukki · Post by **kukki** » Mon 13. Oct 2014, 19:25

Du liegts glaube ich etwas daneben, das hat nichts mit (m)einer Website zu tun, auch wenn man den Slider UNTER ANDEREM ZU DEMOZWECKEN sich dort ansehen kann!

Dafür ist meine Erweiterung überhaupt gar nicht gemacht!

Old Boy · Post by **Old Boy** » Mon 13. Oct 2014, 22:20

Ich will damit ja auch nur sagen: Warum polygonal und kompliziert wenn es auch rechteckig und einfach geht!

Aber natürlich sollst du das so machen, wie DU meinst, ist ja eh klar

unregelmäßige Polygone per CSS3?

unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?

Re: unregelmäßige Polygone per CSS3?