帶文本的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和更舊的。