如何使用 css 或 scss 创建附加形状？

Question

如何创建以下形状

使用 CSS 还是 SCSS？ 我的标记：

<div class="shape-section">
    <div class="line shape-line-one"></div>
    <div class="line shape-line-two"></div>
    <div class="line shape-line-three"></div>
    <div class="line shape-line-four"></div>
</div>

和样式：

.shape-section {
  position: relative;
  .line {
    width: 175px;
    height: 22px;
    background-color: grey;
    &.shape-line-one {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(146deg);
      top: -72px;
      right: 0;
      z-index: 0;
    }
    &.shape-line-two {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(54deg);
      top: -20px;
      right: -20px;
      z-index: 0;
    }
    &.shape-line-three {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(45deg);
      top: -155px;
      z-index: 0;
    }
    &.shape-line-four {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(325deg);
      top: -60px;
      left: 13px;
      z-index: 0;
    }
  }
  
}

我的方法正确吗？请帮我画出这个部分。我的最终目标是使用 CSS 或 SCSS 绘制类似附加图像的结构。

Answer 1

这是一个带有旋转和渐变的想法：

.box {
  width: 200px;
  height: 150px;
  position: relative;
  overflow:hidden;
}

.box span::before,
.box span::after {
  content: "";
  position: absolute;
  height: 120%;
  width: 20px;
  background: #000;
  transform: rotate(60deg);
}

.box span:first-child::before{
  top: 0;
  right: 10%;
  border-radius: 0 0 50px 50px;
  transform-origin: top right;
}
.box span:first-child::after {
  bottom: 0;
  left: 10%;
  border-radius:50px 50px 0 0;
  transform-origin: bottom left;
}

.box span:last-child::before,
.box span:last-child::after {
  height: 100%;
  transform: rotate(-60deg);
}

.box span:last-child::before{
  top: 0;
  left: 10%;
  transform-origin: top left;
  background:linear-gradient(30deg, transparent 10px, #000 11px 40px, transparent 41px 50px,#000 0);
}
.box span:last-child::after {
  bottom: 0;
  right: 10%;
  transform-origin: bottom right;
  background:linear-gradient(210deg, transparent 10px, #000 11px 50px, transparent 51px 80px,#000 0);
}

<div class="box">
  <span></span>
  <span></span>
</div>