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曲线和填充的计算不佳.只有背景颜色(在演示中)它看起来很棒.您可以轻松地将div加倍,一个白色和一个大于1像素的黑色位于其下方,如下所示:

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

至于div的内容,它们不会自然地以这种形式定位,因此你需要给它们绝对的定位并给父母一个overflow:hidden;属性.

Answer 2

简答:不.div不能为你做那件事.至少,不是跨所有浏览器.它始终是一个矩形元素(即使是圆角).

如果你想绘制类似的东西,你可以使用酷炫的新画布标签并掀起一些javascript魔法.如果你正在寻找能够正确保存东西的东西(使用填充等等),那么请看一下:多边形分区 - 使内容溢出特定的形状？

我刚才以同样略有不同的格式问了同样的问题.它有一些很好的答案.