css - 如何使用 clip-path 或任何其他方式在 css 中创建以下形状

Question

我正在努力实现这种形状，但无法获得预期的结果。我在引导轮播中使用它

下面是我目前得到的

div {
  height:300px;
  width:350px;
  background: #414141;
   clip-path: polygon(0 10%, 100% 23%, 100% 90%, 0% 100%);
 filter: drop-shadow(30px 10px 4px #2ec);
}

<div>hello</div>

Answer 1

我的尝试

figure {
  position: relative;
  perspective: 600px;
  border: 0;
  margin: 50px;
  width: 400px;
  height: 300px;
  display: inline-block;
}

img {
  margin: 10px 0 0 15px;  
  border: 2px gold solid;
  width: inherit;
  height: inherit;
  position: absolute;
  z-index: 2;
  border-radius: 40px;
  transform: rotateY(20deg) rotateZ(-2deg);
}


figure::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -8px;
  top: 15px;
  border-radius: 40px;
  transform: rotateY(5deg) rotateZ(4deg) scale(.95);
  height: inherit;
  width: inherit;
  background: #ccc;
}

<figure>
  <img src="/image/UJ3pb.jpg" alt="a cute cat" />
</figure>

---

最终结果