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

问题描述

我是 css 世界的新手，我正在尝试使用 bootstrap、css 和 html5 来制作这样的响应式设计.

但结果是这样.

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

解决方案

使用border-radius得到弯曲的边缘，背景可以使用linear-gradient

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

html, body {高度:100%；}div.outer {宽度:600px；高度:250px；背景:线性渐变(到底部，蓝色 50%，红色 0px)；填充:20px 0;溢出:隐藏；}div.inner {高度:100%；边界半径:50%；背景:白色；边距:0 -50px；}

<div class="inner">

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.

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

解决方案

To get curved edges use border-radius, the background can be achieved with 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>

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