使用css创建曲线形状？答案

【问题标题】：Create a curve shape using css?使用css创建曲线形状？
【发布时间】：2016-01-20 21:04:11
【问题描述】：

我真的需要你的帮助..

有人知道如何使用 css 制作这样的形状吗？

我尝试过，但现在卡住了..

这是css样式和HTML

.a {
  width: 20%;
  height: 500px;
  background-color: red;
  display: inline-block;
  margin: 0;
}
.b {
  display: inline-block;
  position: absolute;
  width: 20%;
  height: 500px;
  background-color: black;
  margin: 0;
  border-radius: 50% 0 0 50%;
  left: 20%;
}

<div id="container">
  <div class="a">
    ...
  </div>
  <div class="b">
    ...
  </div>
</div>

【问题讨论】：

有什么问题？您似乎在图片中创建了相同的形状...
与stackoverflow.com/questions/8503636/…相关（并且可能与stackoverflow.com/questions/8503636/…相关）
@liam_g：html 标签对这个问题并没有太大的影响。不知道为什么您在帖子中有多个其他问题需要修复时建议单独进行编辑。
我已经让它透明了，但它仍然没有修剪红色的形状。
哇哦，有人已经解决了这个问题！好的，谢谢大家..

标签： html css css-shapes

【解决方案1】：

CSS 径向渐变

实现此目的的一种方法是使用径向渐变背景。这也将使您的背景在您需要的区域透明，因此应该符合您的要求。

body {
  background: lightblue;
}
div {
  background: radial-gradient(circle at 250% 25%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, red 50%, red 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 100% 200%;
  height: 400px;
  width: 200px;
}

&lt;div&gt;Text&lt;/div&gt;

【讨论】：

【解决方案2】：

实现此目的的另一种方法是使用css-Shadow 和pseudo-elements

div {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    height: 400px;
    width: 200px;
}

div:before{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    box-shadow: 0 0 0 200px red;
    height: 100%;
    width: 100%;
    border-radius:50%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：