CSS Symbol erzeugen

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

Zitat von basti1012

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

Alles anzeigen

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?

Zitat von m.scatello

XML

<?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>

Alles anzeigen

Vielen Dank.