多形CSS层非矩形CSS层

Question

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

我知道我们可以拥有这种形状的图像，并且具有透明的背景，我们可以拥有像这样形状的图层...但是不，我希望CSS层到像这些形状这样的实际边界... 。

注意：通过“这样的形状，我的意思是这三个示例，而且我可以定义的形状”

Answer 1

如果您需要HTML中的形状，则应嵌入或生成SVG。您可能想看看 拉法.

正常的HTML和CSS只会呈现矩形。

Answer 2

没有直接操纵DOM元素形状的方法 - 所有元素均为矩形（如果它们是 display:block;）或由他们的文本内容塑造（如果它们 display:inline;).

HTML DOM围绕矩形框旋转，因此您不会使用它来获得随机形状的盒子。

这完全取决于您要做的事情。如果您要做的就是绘制形状，那么最好使用帆布，SVG或VML，具体取决于您要确切要做的事情和所需的浏览器支持。

Canvas是一种HTML5技术，基本上为您提供了浏览器中的绘图板，您可以使用JavaScript绘制它。它使您可以创建和动画2D像素艺术。

SVG和VML是矢量图形语言。他们执行大致相同的任务，但是VML特定于Internet Explorer，而其他大多数浏览器都支持SVG。 （IE9也将支持SVG，但尚未广泛使用）。同样，您可以使用JavaScript与这些合作，以跨浏览器方式进行操作的最佳方法是使用 拉斐尔图书馆, ，它为您提供了一个API来创建图形，然后根据浏览器将其转换为幕后VML或SVG。

当然，您也可以在形状外部的盒子中为您的盒子上有一个背景图形，并只使用框架内的区域。它并不是一个多边形的盒子，但是如果您做对了，它看起来也一样好。

如果您真的想使用CSS做到这一点 - 也许要拥有一个其他文本元素可以顺利包裹的盒子，那么您将挣扎。您可以使用一些黑客来实现这些效果，但是它们都不是您想要的。

一个选项可能是CSS变换：这使您可以旋转/偏斜/等一个框。向下的侧面是盒子保持盒子形（因此没有多边形），并且内容物旋转和偏斜以及盒子轮廓，因此可能不适合您要做的事情。另外，它可能无法在所有浏览器上使用，尽管在大多数情况下都可以使用。

可以通过弄乱边框样式来创建具有假角边缘的盒子。看 http://www.cssplay.co.uk/menu/tree.html 一个很好的例子。但是，这不是完美的。

除此之外，您只需要创建多个框并定位它们即可获得最接近您试图实现的形状的匹配。

希望有帮助。

Answer 3

CSS是一种用于造型文档的语言，而不是提供语义结构。 Ergo，没有一种称为“ CSS层”或“ CSS形状”的东西。您的HTML文档中的对象，包括有时被错误地称为“层”的DIV，可以给出索引，说明它们是否在其他对象的前面或后面显示，给出“层”的幻觉。

不，里面没有任何对象，通用的HTML文档可能具有任意形状。有时您可能会在标准盒形状上砍掉来做创意事物，从而结合许多鲜为人知的形状（例如 斜率黑客.

您可能要寻找的是新的 帆布 元素 在HTML5和其他导致它的矢量图形解（例如SVG）中。

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全都与矩形有关。