Hallo liebe Community,
Ich bin gerade dabei an meiner eigenen Homepage herumzutüfteln. Ich würde gerne per CSS eine Form/ein Symbol nachstellen mittels eines div-containers. Die konkrete Frage ist nun aber, wie bekomme ich diese Form per CSS hin. Unten habe ich mal ein Bild angehangen wie es aussehen soll.
Mfg RedNavy
-
-
hast du vergessen das du das Thema schon mal hattest
http://www.forum-hilfe.de/threads/59449-CSS-Symbol-erzeugen
Habe es mitlerweile fast so hinbekommen mit before und after
Aber genau so bekomme ich es nur mit mehreren Container hin. Vieleicht fällt wem anders da noch nee Lösung ein .
Könntest es ja mit Canvas oder svg versuchen
-
hast du vergessen das du das Thema schon mal hattest
http://www.forum-hilfe.de/threads/59449-CSS-Symbol-erzeugen
Habe es mitlerweile fast so hinbekommen mit before und after
Aber genau so bekomme ich es nur mit mehreren Container hin. Vieleicht fällt wem anders da noch nee Lösung ein .
Könntest es ja mit Canvas oder svg versuchen
Nein, vergessen hatte ich das nicht. Aber da von keinem anderen eine Anmerkung kam habe ich mir gedacht es mal hier zu versuchen. Trotzdem Danke für deine Bemühungen.
basti1012 Wie würde ich es denn mit SVG hinbekommen?
-
XML
Alles anzeigen<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="600px" height="600px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 357.76 357.76" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"> <![CDATA[ .fil0 {fill:black} .fil1 {fill:#FDFDFD} ]]> </style> </defs> <g id="Ebene_x0020_1"> <g id="_1906449023296"> <path class="fil0" d="M0 51.07l0 15.43c1.48,3.37 2.45,21.28 3.28,26.89 4.55,31.04 14.96,60.94 27.72,89.08 3.77,8.31 7.09,13.24 9.97,19.24 8.67,18.03 22.56,37.96 34.46,53.79l40.26 47.37c2.55,2.49 4.68,5.03 7.28,7.66 2.52,2.53 4.57,4.65 7.15,7.15 11.88,11.55 25.76,24.24 39.15,34.19 2.09,1.55 7,4.41 8.57,5.89l2.79 0c4.5,-3.64 9.76,-6.64 16.43,-12.24l15.65 -13.55c12.67,-10.31 38.93,-38.34 49.71,-51.08 2.46,-2.91 4.54,-5.38 6.85,-8.04 2.34,-2.69 4.01,-5.11 6.34,-7.98 12.38,-15.27 32.14,-44.53 40.52,-60.84 3.36,-6.55 6.41,-12.28 9.75,-18.89 29.03,-57.24 30.49,-109.85 31.88,-113.18l0 -17.59c-1.11,-1.36 -1.86,-2.93 -3.02,-4.25 -8.01,-9.15 -16.37,-14.32 -27.6,-20.1 -24.1,-12.41 -55.97,-21.94 -83.65,-24.83l-49.23 -5.19 -30.71 0c-3.43,1.36 -19.79,1.47 -25.05,1.92 -8.16,0.69 -16.1,1.65 -24.01,2.86 -25.79,3.93 -60.13,13.06 -82.62,24.7 -6.12,3.17 -11.7,6.29 -16.91,9.92l-14.96 11.67z"/> <path class="fil1" d="M0 357.76l177.84 0c-1.57,-1.48 -6.48,-4.34 -8.57,-5.89 -13.39,-9.95 -27.27,-22.64 -39.15,-34.19 -2.58,-2.5 -4.63,-4.62 -7.15,-7.15 -2.6,-2.63 -4.73,-5.17 -7.28,-7.66l-40.26 -47.37c-11.9,-15.83 -25.79,-35.76 -34.46,-53.79 -2.88,-6 -6.2,-10.93 -9.97,-19.24 -12.76,-28.14 -23.17,-58.04 -27.72,-89.08 -0.83,-5.61 -1.8,-23.52 -3.28,-26.89l0 291.26z"/> <path class="fil1" d="M180.63 357.76l177.13 0 0 -285.8c-1.39,3.33 -2.85,55.94 -31.88,113.18 -3.34,6.61 -6.39,12.34 -9.75,18.89 -8.38,16.31 -28.14,45.57 -40.52,60.84 -2.33,2.87 -4,5.29 -6.34,7.98 -2.31,2.66 -4.39,5.13 -6.85,8.04 -10.78,12.74 -37.04,40.77 -49.71,51.08l-15.65 13.55c-6.67,5.6 -11.93,8.6 -16.43,12.24z"/> <path class="fil1" d="M357.76 54.37l0 -54.37 -163.5 0 49.23 5.19c27.68,2.89 59.55,12.42 83.65,24.83 11.23,5.78 19.59,10.95 27.6,20.1 1.16,1.32 1.91,2.89 3.02,4.25z"/> <path class="fil1" d="M0 51.07l14.96 -11.67c5.21,-3.63 10.79,-6.75 16.91,-9.92 22.49,-11.64 56.83,-20.77 82.62,-24.7 7.91,-1.21 15.85,-2.17 24.01,-2.86 5.26,-0.45 21.62,-0.56 25.05,-1.92l-163.55 0 0 51.07z"/> </g> </g> </svg>
-
XML
Alles anzeigen<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="600px" height="600px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 357.76 357.76" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"> <![CDATA[ .fil0 {fill:black} .fil1 {fill:#FDFDFD} ]]> </style> </defs> <g id="Ebene_x0020_1"> <g id="_1906449023296"> <path class="fil0" d="M0 51.07l0 15.43c1.48,3.37 2.45,21.28 3.28,26.89 4.55,31.04 14.96,60.94 27.72,89.08 3.77,8.31 7.09,13.24 9.97,19.24 8.67,18.03 22.56,37.96 34.46,53.79l40.26 47.37c2.55,2.49 4.68,5.03 7.28,7.66 2.52,2.53 4.57,4.65 7.15,7.15 11.88,11.55 25.76,24.24 39.15,34.19 2.09,1.55 7,4.41 8.57,5.89l2.79 0c4.5,-3.64 9.76,-6.64 16.43,-12.24l15.65 -13.55c12.67,-10.31 38.93,-38.34 49.71,-51.08 2.46,-2.91 4.54,-5.38 6.85,-8.04 2.34,-2.69 4.01,-5.11 6.34,-7.98 12.38,-15.27 32.14,-44.53 40.52,-60.84 3.36,-6.55 6.41,-12.28 9.75,-18.89 29.03,-57.24 30.49,-109.85 31.88,-113.18l0 -17.59c-1.11,-1.36 -1.86,-2.93 -3.02,-4.25 -8.01,-9.15 -16.37,-14.32 -27.6,-20.1 -24.1,-12.41 -55.97,-21.94 -83.65,-24.83l-49.23 -5.19 -30.71 0c-3.43,1.36 -19.79,1.47 -25.05,1.92 -8.16,0.69 -16.1,1.65 -24.01,2.86 -25.79,3.93 -60.13,13.06 -82.62,24.7 -6.12,3.17 -11.7,6.29 -16.91,9.92l-14.96 11.67z"/> <path class="fil1" d="M0 357.76l177.84 0c-1.57,-1.48 -6.48,-4.34 -8.57,-5.89 -13.39,-9.95 -27.27,-22.64 -39.15,-34.19 -2.58,-2.5 -4.63,-4.62 -7.15,-7.15 -2.6,-2.63 -4.73,-5.17 -7.28,-7.66l-40.26 -47.37c-11.9,-15.83 -25.79,-35.76 -34.46,-53.79 -2.88,-6 -6.2,-10.93 -9.97,-19.24 -12.76,-28.14 -23.17,-58.04 -27.72,-89.08 -0.83,-5.61 -1.8,-23.52 -3.28,-26.89l0 291.26z"/> <path class="fil1" d="M180.63 357.76l177.13 0 0 -285.8c-1.39,3.33 -2.85,55.94 -31.88,113.18 -3.34,6.61 -6.39,12.34 -9.75,18.89 -8.38,16.31 -28.14,45.57 -40.52,60.84 -2.33,2.87 -4,5.29 -6.34,7.98 -2.31,2.66 -4.39,5.13 -6.85,8.04 -10.78,12.74 -37.04,40.77 -49.71,51.08l-15.65 13.55c-6.67,5.6 -11.93,8.6 -16.43,12.24z"/> <path class="fil1" d="M357.76 54.37l0 -54.37 -163.5 0 49.23 5.19c27.68,2.89 59.55,12.42 83.65,24.83 11.23,5.78 19.59,10.95 27.6,20.1 1.16,1.32 1.91,2.89 3.02,4.25z"/> <path class="fil1" d="M0 51.07l14.96 -11.67c5.21,-3.63 10.79,-6.75 16.91,-9.92 22.49,-11.64 56.83,-20.77 82.62,-24.7 7.91,-1.21 15.85,-2.17 24.01,-2.86 5.26,-0.45 21.62,-0.56 25.05,-1.92l-163.55 0 0 51.07z"/> </g> </g> </svg>
Vielen Dank.
-
@m.scatello: Woher hast du es denn ?
-
Bitmap in ein Grafikprogramm laden -> Vektorisieren -> Als SVG exportieren
-
Ich habe das mit MAGIX Photo & Grafik-Designer "nachgebaut" und komme zum gleichen Ergebnis!
-
Etwas kompakter geht es mit Bezier-Kurven:
http://jsfiddle.net/Sempervivum/pbjw8sLh/
Dieses hat mir geholfen:
https://codepen.io/explosion/pen/YGApwd
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!