javascript - HTML 中的动态形状 div

Question

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

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

我不只是在寻找一个形状，而是一个可以容纳更多元素的元素。

如果我使用 border-radius 作为解决方案，我面临的主要问题是，我在这个 div 中有 float 图像，现在如果我使用 border-radius，它要么像在 Firefox 中那样被剪裁，要么溢出边界如 WebKit浏览器。如何让这些内容严格位于形状的 div 中？

Answer 1

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

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; 属性。