加入對角線div與flex

Question

我有2個div。正確的div是對角切割的圖像。左邊的div裏面必須有一些文字。我想這是充分響應這樣的：當我改變窗口大小時

的問題，它的崩潰像圖像：

。

此外還有一個左div的文本需要顯示，但與flex這似乎不工作，所以我禁用它。請爲此提供解決方案。 這裏是我的CSS和HTML：

#diagonal { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
#diagonal #ct-about-col-left { 
 
    width: 60%; 
 
    border-right: 190px solid transparent; 
 
    border-bottom: 500px solid grey; 
 
    z-index: 2; 
 
} 
 
#diagonal span { 
 
    display: none; 
 
} 
 
#ct-about-col-right { 
 
    height: 500px; 
 
    width: 50%; 
 
    border: 2px solid; 
 
    background-image: url(images/content/about/right-col-image.jpg); 
 
    z-index: 0; 
 
    margin-left: -12%; 
 
    margin-right: 0; 
 
} 
 
}

<div id="diagonal"> 
 
    <div id="ct-about-col-left"> 
 
    <span>We are the best</span> 
 
    <span>text1 text1 text1</span> 
 
    <span>Text2 text2 text2 text2</span> 
 
    <div> 
 
     <span>Read more</span> 
 
    </div> 
 
    </div> 
 
    <div id="ct-about-col-right"></div> 
 
</div>

Answer 1

我建議另一種方法，這將節省您的一些標記的空間和CSS的規則。

只需創建一個全角分度允許的ID說ct-about，給它一個背景色grey，然後簡單地鏈子顏色的頂部圖像背景，像這樣：

background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey; 

這只是告訴瀏覽器，使我的箱子變灰，並將圖像置於灰色。 no-repeat right top屬性會阻止瀏覽器重複圖像，因此您無法獲取圖塊，請將圖片放在最右側和最上方的位置。

這樣一切都會有反應。

這裏是一個Fiddle爲您更好地理解。

您可以找到有關多個CSS背景在Mozilla Developer Network

Answer 2

更多信息，也許考慮將圖像（如背景圖像），並使得角度略有不同的標記和方法（與變換：歪斜）。

現場演示：http://codepen.io/anon/pen/rjyKRo

<div class="container"> 
    <div class="caption"> 
    <p>CONTENT</p> 
    </div> 
</div> 


* { box-sizing: border-box; } 

.container { 
    width: 100%; 
    height: 50vh; 

    overflow: hidden; 

    background-image: url("http://unsplash.it/600"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 100% 50%; 
} 

.caption { 
    height: 100%; 
    width: 50%; 
    min-width: 500px; 
    padding-top: 20%; 
    padding-left: 130px; 
    background-color: #ddd; 

    transform: skew(10deg, 0deg); 
    transform-origin: 100% 100%; 
} 

.caption p { 

    transform: skew(-10deg, 0deg); 
}