如何在css和html5中创建带曲线的div？ [英] How to create div with curve in css and html5?

问题描述

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

I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.

但结果却是这样的。

but ended up like this.

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

how to create same curve in div displaying in image 1? Note : Red color in second image is for better explanation.I have to apply white color anyway

推荐答案

要获得弯曲边缘使用 border-radius ，背景可以通过线性渐变

To get curved edges use border-radius, the background can be achieved with linear-gradient

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

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>

这篇关于如何在css和html5中创建带曲线的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！