5

是否可以使 CSS 图层的形状如下图所示...

替代文字

我知道我们可以拥有这种形状的图像，并且具有透明背景，我们可以拥有像这些形状的图层......但我不希望 CSS 图层具有像这些形状这样的实际边框......有没有办法 CSS、jQuery 或任何东西...... .

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

4

4 回答 4

5

如果您需要 HTML 中的形状，那么您应该嵌入或生成 SVG。您可能想看看Raphaël。

普通的 HTML 和 CSS 只会渲染矩形。

于 2010-10-19T11:37:07.410 回答
3

没有直接的方法来操纵 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。但同样，它并不完美。

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

希望有帮助。

于 2010-10-19T12:15:43.103 回答
2

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

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

您可能正在寻找类似于 HTML5 中的新canvas 元素和其他矢量图形解决方案（例如 SVG）的东西。

于 2010-10-19T11:33:52.167 回答
1

您可以通过 CSS 转换在最近的 Safari、Chrome、Firefox 和 Opera 中制作第一个形状（平行四边形类型的东西）：

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

于 2010-10-19T12:19:34.460 回答