如何用css制作多边形[重复]答案

【问题标题】：How to make a polygon with css [duplicate]如何用css制作多边形[重复]
【发布时间】：2021-11-11 03:52:22
【问题描述】：

我正在尝试制作圆形切口，但不知道如何制作。 Cutout around the arrow button

【问题讨论】：

你能告诉我们你到目前为止的代码吗？你调查过剪辑路径吗？
This worked for me

【解决方案1】：

这里有 1 个矩形 (span1) 和 3 个圆形。还有position: absolute

.main{
  width: 400px;
  height: 400px;
  background:red;
  margin: 50px;
  position: relative;
}

.span1{
  position: absolute;
  top:0;
  left: -25px;
  height: 100px;
  width: 25px;
  background: red;
}
.span2{
  position: absolute;
  top:25px;
  left: -50px;
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 100%;
}
.span3{
  position: absolute;
  top:-25px;
  left: -50px;
  height: 50px;
  width: 50px;
  background: white;
  border-radius: 100%;
}
.span4{
  position: absolute;
  top:75px;
  left: -50px;
  height: 50px;
  width: 50px;
  background: white;
  border-radius: 100%;
}

<div class="main">
  <span class="span1"></span>
  <span class="span2"></span>
  <span class="span3"></span>
  <span class="span4"></span>
</div>

【讨论】：