使用纯CSS创建形状

Question

如何使用纯CSS创建以下形状？我一直在寻找这个问题，但找不到正确的答案。

Answer 1

这是一个只有一个元素和渐变的想法。您还将具有透明度，并且可以通过调整渐变大小来调整曲线：

.box {
  width:200px;
  height:100px;
  margin:20px;
  display:inline-block;
  border:2px solid #ffff;
  border-right:none;
  background:
    radial-gradient(circle at right,transparent 22%,#fff 22%,#fff calc(22% + 2px), red calc(22% + 3px)) 50% 100%/var(--d,110%) 100% no-repeat
}

body {
 background:pink;
}

<div class="box">
</div>
<div class="box" style="--d:120%">
</div>
<div class="box" style="--d:130%">
</div>
<div class="box" style="--d:140%">
</div>

Answer 2

使用pseudo元素并在:after中创建圆形

body{
background:black;
}
.banner{
height:120px;
width:450px;
background:#990000;
border:2px solid white;
border-radius: 3px;
}
.banner:after{
content: "";
    position: absolute;
    border-radius: 50%;
    background: black;
    top: 10px;
    right: 139px;
    width: 77px;
    height: 120px;
    border-left: 4px solid white;
}

<div class="banner">
</div>