带文本的CSS梯形形状

Question

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

我想要一个梯形形状在它的中间（中空）与格式化文本（以及一个小图像）透明。它也必须有响应。这里是我的意思一个样机：

这是更多钞票用CSS？我知道如何制作一个梯形形状，但我还没有弄清楚如何在文本中获得文本，并使其成为空洞（仅限于形状的轮廓）。

Answer 1

如果梯形形状的width/height应该被动态地改变，则可以通过使用CSS transform引擎实现的效果如下：

.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和更旧的。