带文字的 CSS 梯形

Question

我不知道这是否可以通过 CSS 实现，但值得一问。

我想让梯形在中间（空心）透明，里面有格式化的文本（还有一个小图像）。它还必须是响应式的。这是我的意思的模型：

这可以通过 CSS 实现吗？我知道如何制作梯形，但我还没有弄清楚如何在其中获取文本并让它是空心的（只有形状的轮廓）。

Answer 1

如果要动态改变梯形的width/height，可以使用CSS transforms达到如下效果：

.box {
  width: 300px;        /* optional - feel free to remove it */
  /* height: 150px; */ /* optional - feel free to remove it */
  position: relative;
  padding: 5px;
}

.box:before {
  content: "";
  position: absolute;
  border: 3px solid teal;
  
  top: -4%; bottom: -11%; left: -3%; right: -3%;
  z-index: -1;

  -webkit-transform: perspective(50em) rotateX(-30deg);
  transform: perspective(50em) rotateX(-30deg);
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sed unde voluptate non temporibus quae amet possimus dolorum quisquam atque nemo reprehenderit quasi suscipit vero cum delectus quibusdam optio asperiores.
</div>

但是，IE9 及更早版本不支持此方法。