CSS梯形形状与文本

Question

我不知道CSS是否可行，但值得一提。

我希望梯形形状在中间是透明的（空心的），里面有格式化的文字（以及一个小图像）。它还必须具有响应性。这是我的意思的模型：

这是否适用于CSS？我知道如何制作一个梯形形状，但我还没弄明白如何在里面得到文字并让它是空心的（只有形状的轮廓）。

Answer 1

如果应该动态更改梯形形状的width / height，可以使用CSS transform s实现效果，如下所示：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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