是否可以将 CSS 图层做成如下图的形状...
我知道我们可以拥有这种形状的图像，并且具有透明背景，我们可以拥有像这些形状的图层...但是我不希望 CSS 图层具有像这些形状这样的实际边框...有没有办法 CSS、jQuery 或任何东西....
注意：“像这样的形状不仅仅是这三个例子，而是我可以定义的形状”
【问题讨论】：
标签： jquery css layer shapes css-shapes
如果您需要 HTML 中的形状，那么您应该嵌入或生成 SVG。你可能想看看Raphaël。
普通的 HTML 和 CSS 只会渲染矩形。
【讨论】：
您可以通过 CSS 转换在最近的 Safari、Chrome、Firefox 和 Opera 中制作第一个形状（平行四边形类型的东西）：
除此之外，没有。 CSS 都是关于矩形的。
【讨论】：
没有直接的方式来操作 DOM 元素的形状——所有元素要么是矩形的（如果它们是 display:block;），要么是由它们的文本内容塑造的（如果它们是 display:inline;）。
HTML DOM 围绕矩形框旋转，因此您不会使用它获得随机形状的框。
这完全取决于您要做什么。如果您只想绘制形状，那么您最好使用画布、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 以获取一个很好的示例。但同样，它并不完美。
除此之外，您只需创建多个框并定位它们以获得与您想要实现的形状最接近的匹配。
希望对您有所帮助。
【讨论】：
CSS 是一种用于样式化文档的语言，而不是赋予它们语义结构。因此，没有所谓的“css 层”或“css 形状”。 HTML 文档中的对象，包括有时被错误地称为“层”的 div，可以为它们是否显示在其他对象的前面或后面指定索引，从而产生“层”的错觉。
不，在通用 HTML 文档中没有可以具有任意形状的对象。您有时可能会通过组合许多鲜为人知的形状（例如 slants hack 完成的）来破解标准盒子形状来做创造性的事情。
【讨论】：