Vollständige Version anzeigen : [CSS] Divs mit verschiedenen formen


DOWNandOUT
28.02.2013, 20:35

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:
;;1;xup~in/exec/ximg;php?fid=16836375

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!

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Murdoc
28.02.2013, 21:05

Nutz SVG oder ein Canvas dafür, mit DIV-Elementen wirst du nicht glücklich werden.


DOWNandOUT
28.02.2013, 21:53

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


Murdoc
28.02.2013, 22:15

Fabric~js Javascript Canvas Library (;fabricjs~com/)
Das Framework gibt dir alles an die Hand was du brauchst.


DOWNandOUT
01.03.2013, 15:45

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?


Murdoc
01.03.2013, 18:15

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.


Ähnliche Themen zu [CSS] Divs mit verschiedenen formen
  • 2 divs immer gleiche höhe
    Hey, ich bin gerade dabei eine Seite für einen bekannten zu machen. Wie die Seite grob aufgebaut ist, seht ihr im Anhang. Mein Problem ist, das ich möchte, das sie left_box und die Middle_box, immer gleich hoch sind, und die höhe dadurch bestimmt wird, welche box mehr Inhalt hat. Ich gehe dav [...]

  • Horizontal Liste von Divs
    Hallo zusammen, ich möchte gerne eine horizontale Liste mit Videos und kurzer Info/ein Button neben der Liste. Das ganze soll in etwa so aussehen: Edit fiddle - JSFiddle (;jsfiddle~net/gLxfLx6q/) Jetzt werden die Divs aber trotzdem umgebrochen, sobald das Fenster zu klein wird. Firefox bricht di [...]

  • Problematik mit Verschachtelten Divs
    Guten Tag, Ich weiß gerade nicht wie ich den Thread nennen soll :D ;;;xup~in/pic,78774110/Unbenannt;JPG Mein Design besteht im Grunde aus 3 Div Elementen (im Bild rot, grün, schwarz). Im mittleren Div befinden sich nun die zwei blauen Div Elemente. Wie bekomme ich jetzt das pinke Element [...]

  • [CSS] Layout mit divs
    Hey, ich rupf mir seit paar Tagen die Haare wegen einem kleinen Projekt aus. Ich habe vor mir ein Layout wie folgt mit divs und css zu basteln: Aber das will alles nicht wie ich es will! Problem an sich ist das die Navi links von den beiden anderen divs da ist. Gibt ja sowas wie z;B float: left; [...]



raid-rush.ws | Imprint & Contact pr