如何在HTML和CSS中创建非矩形DIV？

概述我需要创建一个非矩形的DIV,但它更像是两个并排的矩形.但是,我不能为此目的使用两个DIV,因为所有这些都需要有一个连续的边界,并且所有角都需要四舍五入.那么……有没有办法创建非矩形DIV,或者为此目的使用表？ 谢谢. 它应该如下所示： +---------------+| || |+-----------+ | 我需要创建一个非矩形的div,但它更像是两个并排的矩形.但是,我不能为此目的使用两个div,因为所有这些都需要有一个连续的边界,并且所有角都需要四舍五入.那么……有没有办法创建非矩形div,或者为此目的使用表？

谢谢.

它应该如下所示：

+---------------+|               ||               |+-----------+   |            |   |            +---+

标志是圆角.

解决方法 像这样的东西？ http://jsfiddle.net/eW9kR/1/

如果这不是你想要的,请告诉我,我会尽力帮助你.

编辑：看过你更好的描述后,我想出了这个解决方案：http://jsfiddle.net/dPLDr/1/

基本上,你首先创建一个包装器div.wrap来保存其他div.在那,你然后放置你的两个div.

<div >    <div > </div>    <div > </div></div>

然后在包装器上设置宽度.

div.wrap { wIDth: 300px; }

这确保了包含在其中的div将扩展到300 px,除非告知不要.

我们在包含的div上设置了背景和边框.

div.big,div.small { background-color: #F00; border: 1px solID #000; }

然后,您可以在大元素上设置所需的高度,在较小元素上设置宽度和高度.然后,您需要将较小的div放置在需要的位置,我选择根据您的插图将其浮动到右侧.

现在来了魔术：为了给出连续边框的印象,我从小元素中移除顶部边框,并将其相对于其在Y轴上的原始位置定位-1px.这样,它重叠了大的divs边界,使它模糊不清.

div.small { border-top: none; position:relative; top: -1px; }

最后,设置适当的border-radius. et voila.

但是,较小div的左上角是有问题的,因为它需要从所讨论的div舍入.我试图制定一个解决方法,但仅仅使用CSS和HTML无法让它看起来很好.

作为一个正确方向的指针,制作一个看起来像圆形边框的5px x 5px PNG,将它放在较小的div中,并将它相对于x轴定位为-6px.

祝好运！

总结

以上是内存溢出为你收集整理的如何在HTML和CSS中创建非矩形DIV？全部内容，希望文章能够帮你解决如何在HTML和CSS中创建非矩形DIV？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。