HTML中的动态形状div

Question

我可以使用自定义形状制作div吗？我的意思是，默认情况下我有一个矩形div，通过利用div的border-radius属性可以获得一些形状，但我要找的是半叶形元素，如下所示：

图片并不是那么好，但这就是我要找的东西。 div中的元素应该放在这个形状中。我如何获得这样的功能？

我不只是寻找一个形状，而是一个以这种方式塑造的元素，可以容纳更多的元素。

如果我使用border-radius作为解决方案，我面临的主要问题是，我已将图像浮动到此div中，现在如果我使用border-radius，它会像在Firefox中一样被剪裁或者溢出其边界与在WebKit浏览器中一样。如何将此内容严格地放在形状div中？

Answer 1

关于div的形状，可以通过使用CSS border-radius属性调整边框角度的半径来实现：

width:25px;
height:200px;
background-color:#333;
border-top-left-radius:50px 200px;
border-bottom-left-radius:50px 200px;
-moz-border-radius-topleft:50px 200px;
-moz-border-radius-bottomleft:50px 200px;

简单易用的实体div演示：http://jsfiddle.net/AlienWebguy/83scc/1/

只在单个div上使用边框执行此操作无法在Mac上呈现效果 - 例如，如果您只有白色背景和黑色边框，则边框将“剪切”然后“重新显示”由于Bézier curves和填写的计算不佳。只有背景颜色（在演示中）它看起来很棒。你可以轻松地将你的div加倍，一个白色和一个大于1像素的黑色位于它下面，如下所示：

工作大纲示例：http://jsfiddle.net/AlienWebguy/83scc/3/

就div 的内容而言，它们自然不会以这种形式定位，因此您需要给它们绝对定位并给父母一个overflow:hidden;财产。

Answer 2

简答：不。 div不能为你做那件事。至少，不是跨所有浏览器。它始终是一个矩形元素（即使是圆角）。

如果你想绘制类似的东西，你可以使用酷炫的新画布标签并掀起一些javascript魔法。如果你正在寻找能够正确保存事物的东西（使用填充等等），那么请看一下：Polygonal Divs -- Making content overflow in a specific shape?

前一段时间我以同样略有不同的格式问了同样的问题。它有一些很好的答案。

Answer 3

您可以使用百分比，使其适应不同的尺寸;）

尝试调整此大小（在支持CSS调整大小的浏览器中）http://jsfiddle.net/leaverou/XHbhr/1/并观察它如何更改以匹配其维度而不使用任何JavaScript：）

Answer 4

看看mozilla关于border-radius的文档，他们有很好的例子： border-radius