如何將梯形變成相反的？

Question

我在CSS梯形形狀，但問題是，我還需要同一種梯形轉向邊界對面的，第一個梯形的CSS是這樣的：

#trapezoid1 { 
    height: 0; 
width: 350px; 
border-bottom: 190px solid rgb(2, 145, 178); 
border-left: 45px solid transparent; 
border-right: 45px solid transparent; 
padding: 0 8px 0 0; 
display:block; 
position:relative; 
} 

但我也需要第二個梯形將border-bottom轉換爲border-top，但是在這種情況下，文本正在從實際的梯形中飛走。

我做過border-top而不是border-bottom將梯形反過來。

問題在這裏充分展示.. jsfiddle

Answer 1

你最好的選擇是使用僞元素，所以你不必在文本元素上使用絕對定位。

同時使用:before和:after將有助於創建所需的形狀。邊框也是透明的，所以你不必擔心背景圖像被覆蓋。

#trapezoid { 
 
    width: 260px; 
 
    height: 190px; 
 
    background: red; 
 
    margin-left: 45px; 
 
    position: relative; 
 
} 
 
#trapezoid:before { 
 
    content: ''; 
 
    border-right: 45px solid red; 
 
    border-bottom: 190px solid transparent; 
 
    position: absolute; 
 
    left: -45px; 
 
    top: 0; 
 
} 
 
#trapezoid:after { 
 
    content: ''; 
 
    border-left: 45px solid red; 
 
    border-bottom: 190px solid transparent; 
 
    position: absolute; 
 
    right: -45px; 
 
    top: 0; 
 
}

<div id="trapezoid"> 
 
    Text in here 
 
</div>

您也可以參考我的預覽答案這給所有的創建CSS梯形的多種可能方式，一個很好的概述之一。

• Responsive CSS Trapezoid Shape

Answer 2

如何：

HTML（增加約trap2文本span標籤）

<div id="trapezoid1"> 
    Designing Something 
</div> 
<br/> 
<div id="trapezoid2"> 
    <span id="trap2-text">Designing Opposite</span><!-- NEW --> 
    <!-- I need the text in proper place which currently isn't --> 
</div> 

CSS（加一規則）

#trap2-text { 
    position: absolute; 
    top: -190px; 
    left: -25px; 
} 

DEMO

Answer 3

我一般喜歡純CSS的形狀，但我想可能SVG讓您的生活在這種情況下更容易，所以我開始使用您的身邊擺弄擺弄。我對結果並不完全滿意，但它有一些優勢，如動態大小。

撥弄評論：http://jsfiddle.net/bo5k36pa/8/

如果要使用此解決方案我強烈建議編碼您在線svgs用base64避免保持兼容和編碼問題。詳情請參閱this answer。

說明

的想法是使用內聯SVG作爲背景圖像，所以它會延伸到任何尺寸的容器。

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>'); 
background-size: 100%; 

構成梯形的路徑可以修改，如果需要不同的角度或形狀，它甚至可以使用JavaScript動態生成。但真正令人失望的是，我們無法設計內聯svg背景圖像。例如，爲了改變填充顏色，我們必須再次定義整個svg標記。

可能的解決方案，以避免多重內嵌svgs

1. 使用<use>。您可以在外部svg文件中定義<symbols>，並通過它們的id屬性以聯機<svg>的方式引用它們。我們仍然可以使用CSS來設計這些符號。但是，每個集裝箱都需要相當數量的額外標記。類似這樣的： <svg viewBox="0 0 4 2" role="img" title="Trapez"><use xlink:href="path/to/images/shapes.svg#trapez"></use></svg>

2. 使用CSS過濾器來改變外觀。Example fiddle/Browser Support

3. 回到CSS形狀。我建議利用：在僞元素之前和之後使這些奇特的附屬物與您的內容框分開一點。