多形CSS图层\非矩形CSS图层

Question

是否可以使CSS图层形状像下图...

我知道我们可以拥有这种形状的图像和透明背景我们可以拥有像这样的图层......但是我不想要CSS图层到像这些形状这样的实际边框......有没有一种方式CSS，jQuery或任何东西....

注意：'像这样的形状我的意思不仅仅是这三个例子，而是我可以定义的形状'

Answer 1

如果您需要HTML格式，那么您应该嵌入或生成SVG。您可能需要查看Raphaël。

普通的HTML和CSS只会呈现矩形。

Answer 2

没有直接的方法来操纵DOM元素的形状 - 所有元素都是矩形（如果它们是display:block;）或由其文本内容塑造（如果它们是{{1 }}）。

HTML DOM围绕着矩形框，所以你不会使用它来获得随机形状的框。

这完全取决于你想要做什么。如果您只想绘制形状，那么最好使用canvas，SVG或VML，具体取决于您想要做什么以及您需要的浏览器支持。

Canvas是一种HTML5技术，它基本上为您提供了浏览器中的绘图板，您可以使用Javascript进行绘制。它允许您创建2D像素艺术并为其设置动画。

SVG和VML是矢量图形语言。它们执行大致相同的任务，但VML特定于Internet Explorer，而大多数其他浏览器支持SVG。 （IE9也将支持SVG，但它还没有得到广泛使用）。您可以再次使用Javascript来处理这些问题，并且以跨浏览器方式执行此操作的最佳方法是使用Raphael libraray，它为您提供创建图形的API，然后将其转换为VML或SVG根据浏览器幕后。

当然，您也可以使用形状外部的透明区域为您的盒子提供所需形状的背景图形，并且仅使用盒子内的区域。它不会是一个多边形的盒子，但是如果你做得对，它看起来一样好。

如果你真的想用CSS做这件事 - 也许有一个其他文字元素会顺利包裹的盒子，你就会挣扎。你可以使用一些黑客来实现这些效果，但它们都不是你想要的。

一个选项可能是CSS变换：这允许你旋转/倾斜/等一个框。下方是盒子保持盒形（所以没有多边形），内容旋转和歪斜，以及盒子轮廓，所以可能不适合你想要做的。此外，它可能无法在所有浏览器上运行，但在大多数情况下可以使用。

可以通过弄乱边框样式来创建带有假对角线边框的框。请参阅http://www.cssplay.co.uk/menu/tree.html以获得一个好例子。但同样，它并不完美。

除此之外，你只需要创建多个框并定位它们以获得与你想要达到的形状最接近的匹配。

希望有所帮助。

Answer 3

CSS是一种用于样式化文档的语言，而不是为它们提供语义结构。因此，没有被称为“css层”或“css形状”的东西。 HTML文档中的对象（包括有时被错误地称为“图层”的div）可以被赋予它们是否显示在其他对象前面或后面的索引，给出“层”的错觉。

而且，不存在可能具有任意形状的通用HTML文档中的对象。你有时可能会通过组合许多鲜为人知的形状（例如slants hack）来破解标准的盒子形状来做创造性的事情。

您可能正在寻找的内容类似于HTML5中的新canvas element以及其他导向它的矢量图形解决方案。

Answer 4

你可以通过CSS变换在最近的Safari，Chrome，Firefox和Opera中做第一个形状（平行四边形的东西）：

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/En/CSS/Using_CSS_transforms
• （www.opera.com目前正在关闭，但您想要http://www.opera.com/docs/specs/presto26/css/transforms/）
• http://hacks.mozilla.org/2009/06/3d-transforms-isocube/

除此之外，没有。 CSS完全是关于矩形的。