SCSS / CSS响应曲线边框

Question

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

PS：如果弯曲部分可以很容易地调整到任何高度，那也是非常好的。

Answer 1

您可以将:after伪元素用于蓝色部分，并在父级上设置overflow: hidden。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<div class="el"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我的方法：

#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>