如何將兩個傾斜的div並排使用CSS？

我試圖把兩個傾斜的div並排放在一起。我不知道這是可能的CSS，但我想要做這樣的事情：如何將兩個傾斜的div並排使用CSS？

Example

這只是一個例子。

我在想使用漸變背景，但它不起作用，因爲我想做一個具有多個背景的響應式佈局。

<style> 
    body { 
     background: 
      linear-gradient(
       to top left, 
       black, 
       black 50%, 
       rgba(0,0,0,0) 50%, 
       rgba(0,0,0,0) 
      ) 
      top center no-repeat, 

      linear-gradient(
       to top right, 
       black, 
       black 50%, 
       #007bff 50%, 
       #007bff 
      ) 

      top center no-repeat; 
      background-size:40% 200%; 
      background-color: black; 
      padding:0; 
      margin:0 auto; 
      min-height:100%; 
     } 
    } 
</style>

來源

2014-02-22 user2744048

你想三角形的div？我不認爲這是可能的。 – towr

三角形divs是一個很好的方式來做到這一點，我嘗試過，但我害怕，因爲我不能使用百分比，我想做一個響應式佈局。 – user2744048

漸變背景似乎是繪製三角形的好辦法，但是問題是您有麻煩來填充您的div嗎？ –

你可能想是這樣的：

<html> 
    <head> 
     <style type="text/css"> 
      #bleft { 
       border-bottom: 500px solid black; 
       border-right: 500px solid transparent; 
       float:left; 
      } 

      #bright { 
       border-bottom: 500px solid black; 
       border-left: 500px solid transparent; 
       float:right; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="bleft"></div> 
     <div id="bright"></div> 
    </body> 

    <body> 
     <div id="bleft"></div> 
     <div id="bright"></div> 
    </body>

來源

2014-02-22 22:00:54

這是如何響應？這是OP表示他已經但不想要的內容 –

示例HTML格式不正確。例如。雙「身體」標記。 –

如何將兩個傾斜的div並排使用CSS？

回答

相關問題