如何画出类似梯形的卡片？

Question

这是最终效果。

我试过了，但我不知道如何进行。

我希望得到一些提示来帮助我继续。

我现在添加了一些代码，使它看起来更像它。但是看起来还是有点不完美。

你能看到下面的结果吗

我花了很多div组合起来，但是圆角看起来不是很光滑

.block {
      position: relative;
    }
    .block-shapes {
      position: relative;
      display: flex;
    }

    .block-shape {
      position: absolute;
      height: 30px;
      width: 50%;
      top: 0;
    }
    .block-shape__left {
      left: 0;
      border-radius: 40px 40px 0 0 / 30px 30px 0 0;
      background-color: #eee;
    }
    .block-shape__right {
      right: 0;
      margin-top: 30px;
      border-radius: 0 0 40px 40px / 0 0 30px 30px;
      background-color: #fff;
    }

    .block-fills {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    .block-fill {
      position: absolute;
      top: 0;
      box-sizing: border-box;
    }

    .block-fill__left {
      left: 0;
      width: 50%;
      height: 90px;
      background-color: #eee;
      border-radius: 40px 40px 0 0 / 30px 30px 0 0;
    }

    .block-fill__right {
      right: 0;
      margin-top: 30px;
      width: 50%;
      height: 60px;
      background: linear-gradient(to right, #eee, #fff);
      border-radius: 0 40px 0 0 / 0 30px 0 0;
    }
    

    .block-content {
      position: relative;
      z-index: 3;
      height: 300px;
      background-color: #eee;
      margin-top: 60px;
      border-radius: 0 30px 30px 30px;
    }

<div class="block">
    
  <div class="block-fills">
    <div class="block-fill block-fill__left"></div>
    <div class="block-fill block-fill__right"></div>
  </div>

  <div class="block-shapes">
    <div class="block-shape block-shape__left"></div>
    <div class="block-shape block-shape__right"></div>
  </div>


  <div class="block-content"></div>
</div>

Answer 1

这是一个想法，使用一个元素和伪元素以及一个小的 SVG 滤镜来圆化边缘：

.box {
  width: 250px;
  height: 150px;
  margin:50px 20px;
  position: relative;
  background: red;
  filter: url('#goo')
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 30px;
  width: 25%;
  background: inherit;
}

.bottom:before {
  top: 100%;
  right: 0;
}
.bottom:after {
  top: 100%;
  left:50%;
  border-radius:0 0 0 20px;
  transform-origin:top;
  transform:skew(8deg);
}

.top:before {
  bottom: 100%;
  left: 0;
}
.top:after {
  bottom: 100%;
  right:50%;
  border-radius:0 20px 0 0;
  transform-origin:bottom;
  transform:skew(8deg);
}

<div class="box bottom"></div>
<div class="box top"></div>



<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

我使用相同过滤器的类似问题：

如何画出类似梯形的卡片？

how to draw a trapezoid-like card?

css

css-shapes