三角形，使在HTML和CSS

兩個不同的背景，我想這樣的形象創造的東西三角形，使在HTML和CSS

我試圖用兩個div創建兩個不同的三角形，並設法砸碎他們合力得到實現這一點，但不要」不知道如何把文字放在它們上面，使它看起來像這個圖像。我甚至不確定這種方法是否正確。任何改進將不勝感激。

#top { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 300px solid tomato; 
 
    border-right: 600px solid transparent; 
 
    display: inline; 
 
    display: table-cell; 
 
    position: relative; 
 
} 
 

 
#bottom { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 300px solid skyblue ; 
 
    border-left: 600px solid transparent; 
 
    display: inline; 
 
    display: table-cell; 
 
    position: absolute; 
 
    top: 8px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="top"> 
 
    
 
</div> 
 
    <div id="bottom"> 
 
    
 
</div> 
 
</body> 
 
</html>

來源

2016-02-18 knight

你在找一個負責任的解決方案，或者元素具有固定的si澤？ – fcalderan

響應式解決方案是我之後的一個 – knight

我做了一個小提琴：https://jsfiddle.net/Sprazer/hk9761u9/ 非常基本的，沒有響應尚未

編輯響應：https://jsfiddle.net/Sprazer/hk9761u9/

h2 span{ 
    width: 50%; 
    text-align: center; 
    display: block; 
    float: left; 
} 
h2{ 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
-webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    z-index: 5 ; 
    text-align: center; 
    font-size: 50px; 
    margin: 0; 
}

來源

2016-02-18 16:17:22 Sprazer

感謝Sprazer，請你稍微解釋一下代碼，並且我的創建分離背景的方法是對的，還是有更好的選擇？ – knight

我已經改變了小提琴，現在是響應。分割背景是一個非常好的方法。我猜你可能有一個尖銳的線性漸變背景，但在舊版瀏覽器中不起作用。文本只是垂直對齊和分隔，以便每個單詞佔50％的寬度。 – Sprazer

感謝您的幫助。歡呼 – knight

三角形，使在HTML和CSS

回答

相關問題