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

Question

我是css世界的新手，我正在尝试用bootstrap，css和html5来做响应式的设计。

​

​

但最终却成了这样。

​

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

Answer 1

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

border-radius: 100%

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

Answer 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>

​

Answer 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>

(您可以添加两个

的高度，因为您想要获得这些顶部和底部边框)