你好，
谁能帮我在css3中创建下面提到的设计。我已经尝试了以下属性，但仍然无法获得确切的设计
background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;
谢谢
问问题
370 次
2 回答
3
您需要多个 div 才能实现这一目标。
您必须在黑色背景上放置两个其他 div（一个在左侧，一个在右侧），半径为白色。
这是我在我的网站上实现的效果：http: //dystroy.org/re7210/（单击“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”，它应该清楚地表明我在哪里有白色在黑色上，在哪里有黑色在白色上：
（如您所见，我发现使用表格更容易编写所有这些，但您可能可以不使用表格来完成）
于 2012-05-24T13:49:37.560 回答
1
您正在寻找的属性是：
border-top-left-radius和border-top-right-radius
http://www.css3.info/preview/rounded-border/
于 2012-05-24T13:52:10.487 回答