使用纯 CSS 创建形状 [关闭]

【问题标题】：Create a shape with pure CSS [closed]使用纯 CSS 创建形状 [关闭]
【发布时间】：2018-09-16 20:05:39
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：