如何在 css 和 html5 中创建带有曲线的 div？答案

【问题标题】：How to create div with curve in css and html5?如何在 css 和 html5 中创建带有曲线的 div？
【发布时间】：2017-01-04 14:19:29
【问题描述】：

我是 css 世界的新手，我正在尝试使用 bootstrap、css 和 html5 进行这样的响应式设计。

但结果是这样。

如何在图像 1 中显示的 div 中创建相同的曲线？注意：第二张图片中的红色是为了更好地解释。无论如何我都必须应用白色

【问题讨论】：

如果是我，我会使用附加到:after 和:before 的图像，或者执行jsfiddle.net/webtiki/ftw7d5ap (stackoverflow.com/a/25915415/3739498) 之类的操作

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

你应该使用百分比来定义border-radius，这样曲线看起来就像你想要的那样。

border-radius: 100%

http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100

【讨论】：

【解决方案2】：

要获得弯曲的边缘使用border-radius，背景可以使用linear-gradient实现

jsfiddle：https://jsfiddle.net/ojhcbepz/

html, body {
  height: 100%;
}
div.outer {
  width: 600px;
  height: 250px;
  background: linear-gradient(to bottom,blue 50%,red 0px);
  padding: 20px 0;
  overflow: hidden;
}
div.inner {
  height: 100%;
  border-radius: 50%;
  background: white;
  margin: 0 -50px;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

【讨论】：

【解决方案3】：

一个简单的解决方案也许...使用一个小红点图像并在外部 div 中重复它，内部 div 的边框半径为：50%

<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;"> 

    <div style="background-color: white; border-radius: 50%; text-align:center;" >
         ABCDEFGH
    </div>
</div>

(可以加两个

的高度，因为你想得到那些顶部和底部边框）

【讨论】：