在div的中心添加半径而不是角

Question

我非常了解html和css，我正在用css寻找类似这样的东西吗？
是否有任何技巧可以用Css做到这一点？ 的 HTML

<div id="zone-user-wrapper" class="zone-wrapper"></div>   

CSS

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
}

我做了fiddle

THX

Answer 1

您可以尝试这样的事情：

Fiddle

HTML：

<div class="zone-wrapper"></div>
<div id="shape"></div>

CSS：

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
}
#shape {
    height: 20px;
    background-color: white;
    border-top-left-radius: 5000px 300px;
    border-top-right-radius: 5000px 300px;
    top: -20px;
    position: relative;
}

＆LT; --------------------------------------------- ---------------编辑---------------------------------- ---------------------------＆GT;

按照您的要求在此website复制一个。

在此，我已将border-top-left-radius: 4000px 150px和border-top-right-radius: 4000px 150px;添加到.content和.seperator。然后，为所有元素提供适当的z-index。 .content的{​​{1}}值最高，z-index的{​​{1}}值最低，.zone-wrapper的值为z-index。

＆lt; -------------------- [Fiddle | Full Screen Demo |来自With the Image]的website --------------------＆gt;

HTML：

.seperator

CSS：

<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>

Answer 2

具有单个HTML元素的灵活选项

我专注于使用：

创建形状

1. 单个HTML元素 - <header></header>

2. 灵活的百分比单位

CSS

• :before和:after个伪元素重叠以创建曲线

• 伪元素的宽度为100％，将展开和缩回

• 框阴影有助于平滑锯齿状曲线，纹理背景图像会分散眼睛与其余锯齿状像素的分散

• left: -20px和padding-right: 20px隐藏圆角，并使用overflow: hidden

切断

图片归因：以下示例中使用的背景图片来自transparenttextures.com，由Atle Mo创建。

示例

打开全屏并观看它重新调整大小。

＆＃13;
＆＃13;
body {
  margin: 0;
}
header {
  background: url(http://i.stack.imgur.com/TIgas.png);
  height: 80px;
  position: relative;
  overflow: hidden;
}
header:after,
header:before {
  content: '';
  display: block;
  background: #FFF;
  height: 60%;
  width: 100%;
  position: absolute;
  border-radius: 100% 100% 0 0;
  top: 50%;
  left: -20px;
  padding: 0 20px;
  box-shadow: inset 0 0 2px #333;
}
header:before {
  background: #333;
  margin-top: -5px;
}
＆＃13;
<header></header>
＆＃13;
＆＃13;
＆＃13;

Answer 3

＆＃13;

＆＃13;

.zone-wrapper{
    background: none repeat scroll 0 0 #01b888;
    height:150px;
  border-radius: 40px 40px 40px 40px;
  overflow:hidden;
}

.zone-wrapper2{
  margin-top:10px;
  display:inlin-block;
    background: black;
    height:130px;
  border-radius: 40px 40px 40px 40px;
}

＆＃13;

<div id="zone-user-wrapper" class="zone-wrapper">

<div id="div2" class="zone-wrapper2">


</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以使用（https://stackoverflow.com/a/4777943/3905567）：

这样的东西

<div id="header"> <div id="cover-left"></div> <div id="cover-right"></div> </div>

http://jsfiddle.net/p2hH7/215/

Answer 5

诀窍是有2个div。第一个可能是你的实际标题，另一个正好在它下面有一个border-radius属性。所以你的整个标题可能是2的包装。

对你的代码的html做了一些修修补补。 在主标题包装器中添加了一个div。

检查下图：

希望它有所帮助。