Multi-couches en forme CSS \ non-rectangulaire couche CSS

StackOverflow https://stackoverflow.com/questions/3967668

Question

est-il possible de faire des couches CSS en forme comme l'image suivante ...

text alt

Je sais que nous pouvons avoir des images de cette forme et avec un fond transparent, nous pouvons avoir des couches en forme comme celles-ci ... mais non je veux des calques CSS aux frontières réelles comme ces formes ... est-il un CSS façon, jQuery ou quoi que ce soit ....

Note: par « formes comme celles-ci que je veux dire pas seulement ces trois exemples, mais les formes que je pourrais définir »

Était-ce utile?

La solution

Si vous avez besoin de formes en HTML, alors vous devriez intégrer ou de générer des fichiers SVG. Vous pouvez jeter un oeil à Raphaël .

Normal HTML et CSS simplement rendre des rectangles.

Autres conseils

Il n'y a pas un moyen direct de manipuler la forme d'un élément DOM -. Tous les éléments sont soit rectangulaires (si elles sont display:block;) ou façonnés par leur contenu texte (si elles sont display:inline;)

Les Révolutions DOM HTML boîtes rectangulaires autour, de sorte que vous n'allez pas obtenir des boîtes de forme aléatoire en utilisant cela.

Cela dépend exactement ce que vous essayez de faire. Si tout ce que vous voulez faire est de dessiner des formes, alors vous feriez mieux d'utiliser soit la toile, SVG ou VML, selon exactement ce que vous voulez faire et le support du navigateur dont vous avez besoin.

Canvas est une technologie HTML5 qui vous donne essentiellement un tampon de dessin dans le navigateur que vous pouvez dessiner avec Javascript. Il vous permet de créer et d'animer pixel art 2D.

SVG et VML sont vecteur langages graphiques. Ils effectuent à peu près la même tâche, mais VML est spécifique à Internet Explorer alors que la plupart des autres navigateurs prennent en charge SVG. (IE9 soutiendra SVG ainsi, mais il est encore largement utilisé). Encore une fois, vous pouvez travailler avec ces utilisant Javascript, et la meilleure façon de le faire d'une manière multi-navigateur est d'utiliser le Raphael libraray , qui vous donne une API pour créer vos graphiques, puis traduit à VML ou SVG dans les coulisses en fonction du navigateur.

Vous pouvez aussi, bien entendu, juste un fond d'écran pour votre boîte dans la forme que vous voulez avec des zones transparentes en dehors de la forme, et utiliser uniquement la zone à l'intérieur de la boîte. Il ne sera pas vraiment une boîte polygonale, mais si vous le faites correctement, il pourrait regarder tout aussi bien.

Si vous voulez vraiment le faire en utilisant le CSS - peut-être d'avoir une boîte que d'autres éléments de texte s'enrouler autour bien, vous allez à la lutte. Il y a quelques hacks que vous pouvez utiliser pour atteindre ces sortes d'effets, mais aucun d'entre eux sont exactement ce que vous cherchez.

Une option peut être CSS transforme: Cela vous permet de faire pivoter / inclinaison / etc une boîte. Les bas côtés sont que la boîte reste en forme de boîte (donc pas de polygones), et le contenu sont mis en rotation et biaisés ainsi que le contour de la boîte, afin de ne pas peut convenir à ce que vous essayez de faire. En outre, il ne peut pas fonctionner sur tous les navigateurs, mais peut être fait pour travailler dans la plupart des cas.

Il est possible de créer des boîtes avec des bords en diagonale faux par déconner avec les styles de bordure. Voir http://www.cssplay.co.uk/menu/tree.html pour un bon exemple. Mais encore une fois, il est pas parfait.

Autre que cela, vous aurez juste à créer plusieurs boîtes et la position pour obtenir leur match le plus proche de la forme que vous essayez d'atteindre.

L'espoir qui aide.

CSS est un langage pour les documents de style, ne leur donnant pas la structure sémantique. Ergo, il n'y a pas quelque chose de connu comme une « couche de css » ou « forme css ». Objets dans vos documents HTML, y compris divs qui sont parfois appelés à tort « couches », peut être donné des indices de savoir s'ils affichent devant ou derrière d'autres objets, donnant l'illusion de « couches ».

Et non, il n'y a pas d'objets dans les documents HTML et génériques qui peuvent avoir des formes arbitraires. Vous pouvez parfois pirater des formes de boîte standard pour faire des choses créatives en combinant beaucoup de formes peu connues, comme cela se fait avec la touche toile élément en HTML5 et les autres solutions graphiques vectoriels tels que SVG qui ont conduit à lui.

Vous pouvez faire la première forme (la chose parallélogramme) au cours des dernières Safari, Chrome, Firefox et Opera via CSS transforme:

En dehors de cela, non. CSS est tout au sujet des rectangles.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top