我可以制作一个自定义形状的div吗？我的意思是,默认情况下我有一个矩形div,通过利用div的border-radius属性可以获得一些形状,但我要找的是一个半叶形元素,如下所示：
图片并不是那么好,但这就是我要找的东西. div中的元素应该放在这个形状中.我如何获得这样的功能？
我不只是寻找一个形状,而是一个这样形状的元素,可以容纳更多的元素.
如果我使用border-radius作为解决方案,我面临的主要问题是,我已经在这个div中浮动图像,现在如果我使用border-radius,它就像在Firefox中一样被剪裁或者像在WebKit中那样溢出边界浏览器.如何将此内容严格地放在形状div中？
解决方法
关于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像素的黑色位于它下面,如下所示：
