CSS中心弯曲图

Question

有没有办法仅使用纯CSS绘制下图？ figure

Answer 1

很难知道您要寻找什么，但这并不难。我希望这有帮助。这也是codepen版本

.figure {
  display: flex;
  height: 48px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.figure:before {
  background-color: black;
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  height: 24px;
  width: 276px;
}

.figure:after {
  background-color: white;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 300px;
}

<div class="figure"></div>