SCSS / CSS响应式弯曲边框[关闭]答案

【问题标题】：SCSS / CSS responsive curved border [closed]SCSS / CSS响应式弯曲边框[关闭]
【发布时间】：2017-10-23 23:42:20
【问题描述】：

我正在尝试使用 scss / css（使用 ionic 3）为 android 应用程序制作响应式弯曲边框，并且看起来像这样：

PS：如果弯曲部分可以很容易地调整到任何高度，那就太好了。

【问题讨论】：

【解决方案1】：

这是我的方法：

#background {
  width: 100vw;
  height: 100vh;
  background: tomato;
  overflow: hidden;
  position: fixed;
}

#background::before {
  content: "";
  display: block;
  width: 200vw;
  height: 200vw;
  border-radius: 50%;
  background: green;
  position: absolute;
  bottom: 50vh;
  left: 50%;
  transform: translateX(-50%);
}

#wrapper {
  position: relative;
  color: #fff;
  text-align: center;
}

<div id="background"></div>
<div id="wrapper">Some content above the background element</div>

【讨论】：

做了它应该做的基本事情，但我在 div#container 中添加的任何内容都停留在 :after （曲线）之后
我编辑了我的答案......我希望这会有所帮助，即使它非常简单。您是否对此进行了实验或搜索？
不错！有用！！谢谢

【解决方案2】：

您可以将:after 伪元素用于蓝色部分，并将@987654322@ 设置为父元素。

.el {
  width: 40%;
  height: 300px;
  background: #B5B5B5;
  position: relative;
  overflow: hidden;
}
.el:after {
  content: '';
  background: #48B2FF;
  height: 150%;
  width: 200%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -70%);
}

&lt;div class="el"&gt;&lt;/div&gt;

【讨论】：