HTML中的动态形状div答案

【问题标题】：Dynamic shaped div in HTMLHTML中的动态形状div
【发布时间】：2013-11-06 03:55:29
【问题描述】：

我可以制作一个自定义形状的 div 吗？我的意思是，我默认有一个矩形div，利用div的border-radius属性可以得到一些形状，但我要找的是一个半叶形的元素，像这样：

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

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

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

【问题讨论】：

这是相当困难的。你能告诉我们一些背景吗？它可能会帮助我们想出解决方案。
这也可以用border-radius来完成
没有 HTML5 ，它非常困难，你为什么不去找一个看起来像这样的图像并在上面写你的文字
我不认为他想要的东西可以用border-radius 单独完成。它达到了border-radius 只会让它看起来像“药丸”形状而不是叶子形状的地步。
@Charles：我觉得很合适...jsfiddle.net/minitech/XHbhr

标签： javascript jquery html css

【解决方案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; 财产。

【讨论】：

由于宽度减小，您越来越接近叶子结构....我认为宽度增加时不会保持不变？？
当然可以，您只需要确保根据 div 的尺寸设置边框半径值。它可以是你想要的任何尺寸。

【解决方案2】：

简短的回答：不。一个 div 不能为你做到这一点。至少，不是在所有浏览器中。它本质上是，并且永远是一个矩形元素（即使是圆角）。

如果你想画这样的东西，你可以使用很酷的新画布标签，并激发一些 JavaScript 魔法。如果您正在寻找能够真正正确容纳事物的东西（使用填充和所有这些），那么请看一下：Polygonal Divs -- Making content overflow in a specific shape?

我不久前以稍微不同的格式问过同样的问题。它有一些很好的答案。

【讨论】：

【解决方案3】：

您可以使用百分比，使其适应不同的大小；）

尝试调整它的大小（在支持 CSS 调整大小的浏览器中）http://jsfiddle.net/leaverou/XHbhr/1/ 并观察它如何变化以匹配其尺寸而无需任何 JavaScript :)

【讨论】：

【解决方案4】：

查看 mozilla 关于边界半径的文档，他们有很好的例子： border-radius

【讨论】：