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

Question

我需要创建一个不规则的DIV，它看起来像是两个并排的矩形。但是我不能使用两个DIV来实现这个目的，因为所有的边框都需要连续，并且所有的角都需要是圆角。那么...有没有办法创建一个非矩形的DIV，或者使用表格来实现这个目的呢？

谢谢。

它应该是这样的：

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

+号表示圆角。

- user945620

Answer 1

像这样吗？http://jsfiddle.net/eW9kR/1/

如果不是您想要的，请告诉我，我会尽力帮助。

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

基本上，您首先创建一个包装器div.wrap来容纳其他div。然后，在其中放置两个div。

<div class="wrap">
    <div class="big"> </div>
    <div class="small"> </div>
</div>

您需要在包装器上设置宽度。

div.wrap { width: 300px; }

这样可以确保被包含在内的div将扩展到300像素，除非另有规定。

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

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

您可以在大元素上设置所需的高度，以及在小元素上设置宽度和高度。然后，您需要将小div定位到其所需位置，我选择根据您的插图将其向右浮动。

现在是关键：为了给人以连续边框的印象，我从小元素中移除了顶部边框，并将其相对于Y轴上的原始位置向上移动1像素。这样，它就重叠在大div的边框上，遮盖了它。

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

最后，您需要设置适当的边框半径。完成后，您会发现一个美观的效果。

然而，小div的左上角是有问题的，因为它需要从所在的div中凸出。我尝试过用CSS和HTML来绕开这个问题，但无法使其看起来好看。

作为正确方向的指针，您可以制作一个5px x 5px的PNG文件，看起来像所需的圆角边框，将其放置在小div中，并将其相对于x轴定位到-6px。

祝你好运！

- Andreas Eriksson

Answer 2

你可以在一个容器 DIV 中使用 2 个 DIV。

你可以得到类似这样的结果：http://jsfiddle.net/tyrons/tjdwA/

HTML 很简单：

<div id="outer" class="outer">
    <div id="inner1" class="inner">This is the first div</div>
    <div id="inner2" class="inner">This is the last div</div>
</div>

而CSS也是如此：

.outer {
   border: 5px solid blue;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   -khtml-border-radius: 20px;
    border-radius: 20px;
    float:left;
    padding: 10px;
}

.inner {
    border: 1px dashed red; 
    width: 200px;
    float:left; 
 }

- tyron