【问题标题】：Making Curvy shape using CSS使用 CSS 制作曲线形状
【发布时间】：2016-01-18 01:12:04
【问题描述】：

您好，我想在我网站的横幅图像上制作一个浅灰色 (#444) 曲线叠加。我附上了我想要的图片。

【问题讨论】：

在图像中看不到任何弯曲的形状。请突出显示您要创建的内容。
你可以将模糊的图像设置为div的背景。
建筑图像上方的曲线灰色叠加层。 @哈利
@MueedullahK。这似乎更像是图像的一部分（或）从透明（在建筑物顶部）到半透明灰色（在末端）的径向渐变。使用 CSS 创建凹形非常困难，径向渐变的支持率很低，我建议您使用图像或 SVG。

【解决方案1】：

这可以通过使用 CSS 径向渐变来实现。

您可以使用额外的 div，也可以根据需要使用伪元素。

我已经使用了多个 div 来向您展示它是如何构建在一起的。

.container {
  width: 900px;
  height: 300px;
  position: relative;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: -webkit-radial-gradient(100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background: radial-gradient(at 100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background-size: 100% 225%;
}
.overlay .text {
  width: 50%;
  padding: 20px;
  color: white;
}

<div class="container">
  <img src="http://lorempixel.com/900/300/" width="100%" height="auto" />
  <div class="overlay">
    <div class="text">
      <p>Some Text</p>
    </div>
  </div>
</div>

【讨论】：

感谢斯图尔特，我非常感谢您的帮助。请增加曲线，意味着使曲线更深更圆。还要让css代码跨浏览器，
@MueedullahK。代码应该可以跨浏览器。我已经增加了曲线并使其更深，应该足够了
谢谢，你做了什么来增加曲线？我想知道，这样我就可以根据需要进行调整。
改变背景大小高度和径向渐变位置之间的混合。颜色停止的变化也在径向渐变内。如果这一切正常，接受将非常受欢迎。
非常感谢，我已经很接近它了，但只需要让曲线更深更轻，一两点。

【解决方案2】：

您可以使用多个背景和radial-gradient。 Here's an example.

编辑这是该示例中的 CSS。

#banner{
   width:400px;
   height:200px;
   background:radial-gradient(circle farthest-corner at 100% 50%,rgba(68,68,68,0) 60%,#444 70%),url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Sun-in-the-sky.jpg/800px-Sun-in-the-sky.jpg);
   background-size:cover;
}

【讨论】：

好答案。如果您在答案本身中添加代码而不是将其留在外部站点会更好:)

【解决方案3】：

绝对定位的 div 作为叠加层

使用叠加层和绝对位置，您可以创建灰色叠加层。

.container {
  position: absolute;
  display: inline-block;
  width: 400px;
  height: 200px;
  background-color: #444;
  background-image: url("http://www.lorempixel.com/400/200/");
  color: white;
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 70%;
  height: 150%;
  background: radial-gradient(ellipse at 100% 50%, transparent 40%,  #444 60%);
  top: -25%;
}
.container p {
  position: relative;
  margin-left: 2em;
}

<div class="container">
  <div class="overlay"></div>
  <p>Text</p>
</div>

【讨论】：

感谢 Persijn，我非常感谢您的帮助。请增加曲线，意味着使曲线更深更圆。还要让css代码跨浏览器，
@MueedullahK。适用于 chrome：47. IE Edge 25. Firefox 43。您应该在问题中提到您要寻求的支持。
我想要跨浏览器友好意味着它应该适用于几乎所有浏览器，至少请让曲线更深。
我确实让它更深了？