[CSS] Divs mit verschiedenen formen

Dieses Thema im Forum "Webdesign" wurde erstellt von DOWNandOUT, 28. Februar 2013 .

  1. 28. Februar 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Divs mit verschiedenen formen

    Hallo, habe grad ein kleines Problem was CSS angeht und bräuchte mal hilfe.

    Unzwar habe ich 4 Divs mit hintergrundbildern die eine beliebige form haben (rund mit wellen drin usw). nun möchte ich das wenn man auf einen div klickt dieser das hintergrundbild ändert. klappt auch soweit mit jquery.

    Das Problem ist das die Divs eckig sind und somit überlappen, das heisst wenn man links noch n stück im div2 ist wird der click von div1 aktiviert. habe versucht mit border-radius die divs abzurunden aber das klappt leider nur bedingt.

    zur veranschaulichung habe ich mal ein bild gemalt:
    Bild

    Wie man sieht haben die bereiche eine sehr eigene form. Nun wäre meine Frage gibt es eine möglichkeit die Divs in so eine form zu kriegen ? bzw das die einzelnen bereiche nicht überlappen?

    Schonmal danke!
     
  2. 28. Februar 2013
    AW: Divs mit verschiedenen formen

    Nutz SVG oder ein Canvas dafür, mit DIV-Elementen wirst du nicht glücklich werden.
     
    1 Person gefällt das.
  3. 28. Februar 2013
    AW: Divs mit verschiedenen formen

    Ja, hatte gedacht das ich da mit HTML5 ran muss und hab mir mal das Canvas-Element angeguckt, damit kann ich malen, aber nen hintergrundbild reinmachen? Und ist nen Canvas nicht trotzdem rechteckig? also wenn ichs mit firebug markiere schon. Könntest mir da evtl zu ner Seite raten wo ic hdie nötigen Informationen für mein vorhaben finde?

    MfG
     
  4. 28. Februar 2013
    AW: Divs mit verschiedenen formen

    Fabric.js Javascript Canvas Library
    Das Framework gibt dir alles an die Hand was du brauchst.
     
  5. 1. März 2013
    AW: Divs mit verschiedenen formen

    Hey,

    habe mit dem fabricJS mal ein wenig rumprobiert und auch meine Bilder reingeladen. Aber die Canvas-Elemente ansich sind doch immernoch eckig? bzw überlappen wenn ich meine Bilder zusammen schiebe. Da habe ich doch das gleiche Problem wie vorher auch oder hab ich was übersehen?
     
  6. 1. März 2013
    AW: Divs mit verschiedenen formen

    Ja ein Canvas Element ist eckig.
    Aber du sollst deine Element ja darin Zeichnen.

    Mit einer SVG kannst du beliebig viele Kurven rendern und mit Event-Listenern ausstatten.
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.