Multi-Shaped CSS-Ebenen \ Non-rechteckige CSS-Ebene

Question

ist es möglich, CSS-Ebenen geformt wie das folgende Bild ...

machen

Ich weiß, wir Bilder dieser Form haben und mit transparentem Hintergrund können wir Schichten wie diese geformt haben ... aber nein ich will CSS-Ebene zu tatsächlichen Grenzen wie diese Formen ... ist es eine Möglichkeit, CSS, jQuery oder irgendetwas ....

Hinweis: durch ‚Formen wie diese meine ich nicht nur diese drei Beispiele, aber Formen, dass ich definieren könnte‘

Answer 1

Wenn Sie Formen in HTML dann sollten Sie einbetten oder SVGs erzeugen. Sie können nehmen wollen einen Blick auf Raphaël .

Normale HTML und CSS werden nur Rechtecken machen.

Answer 2

Es gibt keine direkte Art und Weise die Form eines DOM-Element zu manipulieren -. Alle Elemente entweder rechteckig sind (wenn sie es display:block;) oder durch ihren Textinhalt geformt (Wenn sie display:inline;)

Die HTML-DOM dreht sich um rechteckige Kästen, so dass Sie nicht zufällig geformte Boxen mit, dass in Gang zu bringen.

Es hängt genau das, was Sie zu tun versuchen. Wenn alles, was Sie tun wollen Formen ist zu zeichnen, dann würden Sie besser dran, so oder Leinwand verwenden, SVG oder VML, je nach genau das, was Sie tun möchten, und die Browser-Unterstützung Sie benötigen.

Canvas ist eine HTML5-Technologie, die Ihnen im Grunde gibt einen Zeichenblock im Browser, die Sie mit Javascript zurückgreifen können. Es ermöglicht Ihnen das Erstellen und Animieren von 2D-Pixel-Kunst.

SVG und VML sind Vektorgrafik Sprachen. Sie führen in etwa die gleiche Aufgabe, aber VML ist spezifisch für den Internet Explorer, während die meisten anderen Browser SVG unterstützen. (IE9 wird ein SVG-Unterstützung als gut, aber es ist nicht weit verbreitet noch) nicht. Auch hier kann man mit diesem mit Javascript arbeiten, und den besten Weg, es in einer Cross-Browser-Art und Weise zu tun, ist das Raphael libraray , die gibt Ihnen eine API, um Ihre Grafiken zu erstellen, und übersetzt sie dann zu VML oder SVG hinter den Kulissen nach dem Browser.

Sie könnten natürlich auch, haben nur eine Hintergrundgrafik für Ihre Box in der Form, die Sie außerhalb der Form mit transparenten Bereichen wollen, und nur den Bereich innerhalb der Box verwenden. Es wird nicht wirklich eine polygonale Box sein, aber wenn man es richtig macht es könnte genau so gut aussehen.

Wenn Sie wirklich wollen, es mit CSS - vielleicht um ein Feld zu haben, dass andere Textelemente um reibungslos wickeln werden, bist du zu Kampf gehen. Es gibt ein paar Hacks Sie diese Art von Wirkungen zu erzielen verwenden können, aber keiner von ihnen ist genau das, was Sie suchen.

Eine Option kann CSS-Transformationen sein: So können Sie Drehen / Schief / etc einer Box. Die Schattenseiten sind, dass die Box bleibt kastenförmig (also keine Polygone), und der Inhalt gedreht und verzerrt sowie die Box Umriss, kann so nicht passen, was Sie zu tun versuchen. Auch kann es nicht Arbeit auf allen Browsern, kann allerdings zur Arbeit in den meisten Fällen durchgeführt werden.

Es ist möglich, Kisten mit gefälschten diagonalen Kanten zu schaffen, indem sie mit den Rahmenarten rumgespielt. Siehe http://www.cssplay.co.uk/menu/tree.html für ein gutes Beispiel. Aber noch einmal, es ist nicht perfekt.

Other than that, Sie müssen nur sie schaffen müssen, um mehrere Boxen und die Position am nächsten kommt für die Form zu bringen, Sie versuchen zu erreichen.

Ich hoffe, das hilft.

Answer 3

CSS ist eine Sprache für Dokumente Styling, nicht um sie semantische Struktur zu geben. Ergo, es ist nicht etwas, das als „css layer“ bekannt oder „CSS-Form“. Objekte in Ihren HTML-Dokumenten, einschließlich divs, die manchmal fälschlicherweise bezeichnet werden als „Schichten“, gegeben Indizes werden kann, ob sie vor oder hinter anderen Objekten, so dass die Illusion von „Schichten“.

Anzeigen

Und nein, es gibt keine Objekte in und generische HTML-Dokumenten, die beliebige Formen aufweisen können. Sie können manchmal auf Standard-Kastenformen hacken kreative Dinge zu tun, von vielen wenig bekannten Formen wie geschieht mit der Leinwand -Element in HTML5 und den anderen Vektorgrafiklösungen wie SVG, die dazu geführt haben, nach oben.

Answer 4

Sie können die erste Form tun (die Parallelogramm-Sache) in der letzten Safari, Chrome, Firefox und Opera über CSS-Transformationen:

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/En/CSS/Using_CSS_transforms
• (www.opera.com ist im Moment nach unten, aber Sie wollen http://www.opera.com/docs/specs/presto26/css/transforms/ )
• http://hacks.mozilla.org/2009/06/3d -transforms-isocube /

Abgesehen davon, Nr. CSS ist alles über Rechtecke.