CSS3文件选项卡，底部带有插入角

嗨

谁能帮我在css3中创建下面提到的设计。我尝试了以下属性，但仍然有问题，以获得准确的设计

background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;

---

谢谢

您需要多个div才能实现这一目标

你们必须把另外两个div，一个在左边，一个在右边，在黑色背景上加上半径为白色的div

这是我在我的网站上实现的效果：单击Toutes les recettes

你是这样做的：

        _________
       /         \
div C |  div A    |  div B
     /            \

C和B是白色div，覆盖100%的单元格，黑色背景仅在边界半径不为0时可见

在本例中，主目录右侧的div具有以下css：

#divB {
background-color: white;
border-radius: 0 0 0 10px;
}

以下是我的最终效果：

这是我的divB，它应该能清楚地表明我在哪里有白对黑，在哪里有黑对白：

---

如您所见，我发现使用表格更容易编写所有这些内容，但您可能可以在没有表格的情况下编写这些内容。您要查找的属性有： 边框左上半径和边框右上半径

---

不，事实上，这可以是一个使用CSS3的单个div元素，我使用的库也可以支持IE浏览器。@Mujahid公平地说，如果你能用一个元素做到这一点，并且你知道你可以做到，你就不会有关于堆栈溢出的问题。@dystroy：这看起来不错，但我希望我们可以在下面的链接中这样做，并在该页面中看到梯形，这是可以的，但我已经为它制作了圆角边框…我不认为你可以用这种方式将底部插入圆角。@Mujahid正如我所怀疑的，你的单元素示例与你的图像所描述的相去甚远。@但当我设置边界半径：5em 5em 1em 1em时，这将设置左上角和右上角半径5em right？无论如何，我会尝试他已经使用边界半径来设置左上角和右上角半径是的，我读得太快了。我也没有注意到它的底部有相反方向的圆角。你在底部有嵌入曲线的方式让我相信你需要不止一个元素来复制这个形状。@MetalFrog:你如何命名这个形状？这个问题的一个新标题会很有用。它有点像一个文件选项卡，所以也许沿着CSS3文件选项卡的线条，在底部插入角会有所帮助？有扩边的梯形？我肯定有一个专门的术语来描述这种曲线类型，但我一下子就不知道了。