是否可以在div的顶部创建径向边框？ [重复]

Question

此问题已经在这里有了答案：

Curve bottom side of the div to the inside with CSS（2个答案）

[<9天前关闭。

我正在尝试创建类似这样的东西。

请参见下面具有放射状顶部的部分，我尝试过在伪元素前后添加一个附加元素，但是不一样，无法创建完全相同的曲线。

看一下代码，

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.radial {
  position: relative;
}

.radial:after {
  position: absolute;
  content: "";
  height: 500px;
  width: 100%;
  background: white;
  z-index: 9;
  border-radius: 0 0 75% 75%;
  border-style: solid;
  border-width: 0 0 100px 0;
  border-color: red;
}

.radial.bottom:after {
  bottom: -60%;
}

<section class="banner radial bottom" style="background-color: #888; min-height: 200px;">
  <div style="height: 500px; background: white;"></div>
</section>
<section style="background: red; height: 1000px;" class=""></section>

我有一种本能，可以使用剪切路径完成此操作，但不确定，也尝试过但无法实现。是否可以通过CSS创建此效果，但我不想使用image。

Answer 1

您可以从CSS使用边框：

#border-radius-element {
  border: 2px;
  padding: 10px;
  border-radius: 20px 0px 0px 20px;
}