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>