CSS3全寬梯形/多邊形文字？

Question

我正在嘗試重做一個當前無響應的客戶端站點，並且在整個站點中，她的長圖像都是梯形的，內部帶有文本。 當然，在設備上，您幾乎看不到它。

因此，我正在嘗試使用形狀將其轉換為CSS。 嘗試了很多示例，但目前沒有任何效果。 我認為區別在於示例似乎使用硬寬度數字而不是100％作為流體寬度。 我在這里有一支筆： https : //codepen.io/anon/pen/KmgoqE ，這是我發布此代碼時正在使用的代碼（當然仍在播放）：

h2.test-text {
  background: #000;
  color: #FFF;
  padding: 5px;
  font-size: 30px;
  line-height: 1;
  width: 100%;
  text-align: center;
  position: relative;
}

h2.test-text:before {
  content: "";
  position: absolute;
  border: none;
  top: -4%;
  bottom: -11%;
  left: -3%;
  right: -3%;
  z-index: -1;
  -webkit-transform: perspective(50em) rotateX(-30deg);
  transform: perspective(50em) rotateX(-30deg)
}

Answer 1

您已經有了很好的答案

再試一次。 我選擇修復您當前的嘗試。

基本上問題是背景應該在偽的而不是基礎的

 h2.test-text { color: #FFF; padding: 5px; font-size: 30px; line-height: 1; width: 100%; text-align: center; position: relative; } h2.test-text:before { content: ""; position: absolute; border: none; top: -0px; bottom: -50%; left: 0px; right: 0px; z-index: -1; background: #000; transform: perspective(20em) rotateX(-45deg); transform-origin: top; } 

 <h2 class="test-text">Check out what our Clients are Saying</h2> 

現在看中了效果

 h2.test-text { color: #FFF; padding: 5px; font-size: 30px; line-height: 1; width: 100%; text-align: center; position: relative; perspective: 20em; animation: tilt 2s infinite alternate linear; } h2.test-text:before { content: ""; position: absolute; border: none; top: -0px; bottom: -50%; left: 0px; right: 0px; z-index: -1; background: #000; transform: rotateX(-45deg); transform-origin: top; } @keyframes tilt { from {perspective-origin: left} to {perspective-origin: right} } 

 <h2 class="test-text">Check out what our Clients are Saying</h2> 

Answer 2

您可以通過使用常見的透明邊框技巧來實現css三角形來實現此效果。 只是使用了不同的邊框大小和兩種顏色，而不是均勻的邊框，並且只有一種設置為非透明的。 我對右邊緣進行了不同的着色，因此更容易看到正在發生的情況。

 h2.test-text { background: #bada55; color: #FFF; font-size: 30px; padding: 5px; line-height: 1; width: 80%; text-align: center; position: relative; margin:40px; } h2.test-text:before, h2.test-text:after { content:"";position:absolute;top:0;width:0;height:0; border-style:solid; border-width:20px 15px; } h2.test-text:before{ left: -30px; border-color: #bada55 #bada55 transparent transparent; } h2.test-text:after { right: -30px; border-color:blue transparent transparent red; } 

 <h2 class="test-text">Whatever somebody says&hellip;</h2> 

Answer 3

通過使用偽元素並將其傾斜，您可以實現。

如果該行最多分為3行，則此方法有效，如果需要更多行，則可以通過媒體查詢來解決。

 h2.test-text { background: #000; color: #FFF; padding: 5px; font-size: 30px; width: calc(100% - 120px); margin: 0 auto; text-align: center; position: relative; } h2.test-text:before, h2.test-text:after { content: ""; position: absolute; top: 0; height: 100%; width: 70px; background: inherit; z-index: -1; } h2.test-text:before { left: -35px; transform: skewX(30deg) } h2.test-text:after { right: -35px; transform: skewX(-30deg) } h2.test-text.nr2 { margin-top: 20px; width: calc(60% - 100px); } 

 <h2 class="test-text">Check out what our Clients are Saying</h2> <h2 class="test-text nr2">Check out what our Clients are Saying</h2>