與內容斜角格

Question

我有一個要求，佈局符合下列要求角度的div元素網站：

1. 各部分的高度顯示主題並排和〜800像素時，時一定要〜400像素這些列垂直摺疊。理想情況下，這將自動調整到封閉的內容。
2. 它必須角度向下以鎖定 7度
屏幕
3. 必須能夠包含圖像背景，而不是僅僅一個純色的
4. 全寬

實施例：

代碼我至今：

.centeredContent{  
 
    transform: rotate(7deg) translateY(-50%); 
 
    -ms-transform: rotate(7deg) translateY(-50%); 
 
    -webkit-transform: rotate(7deg) translateY(-50%); 
 
    top:46%; 
 
    position:absolute; 
 
    background-color:rgba(120,0,0,.0) 
 
\t } 
 

 
.rotateBack { 
 
    -ms-transform: rotate(-7deg); /* IE 9 */ 
 
    -webkit-transform: rotate(-7deg); /* Safari */ 
 
    transform: rotate(-7deg); 
 
    background-color:rgba(0,120,0,.0) 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="div1" style="background-color:rgba(77,77,77,.2); position:relative;overflow:hidden;"> 
 
    <div id="content1" class="centeredContent"> 
 
     <div class="row" > 
 
      
 
      <div class="col-lg-offset-1 col-md-4 rotateBack"> 
 
       <h2 style="color:#8aada8">topic 1</h2> 
 
       <p>Lorem...</p> 
 
       <button style="width:185px;height:52px;">Learn More</button> 
 
      </div> 
 
      <div class="col-lg-offset-2 col-md-4 rotateBack"> 
 
       <h2 style="color:#8aada8">topic 2</h2> 
 
       <p>Lorem ...</p> 
 
       <button style="width:185px;height:52px;">Learn More</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div style="background-color:rgba(0,0,100,.0);overflow:hidden"> 
 
     <svg width="100%" id="svg1" style="margin:0;padding:0px;" viewBox="0 0 1590 600"> 
 
      <polygon id="polygon1" points="0,0 0,400 1590,600 1590,200" style="fill:#525252;stroke:#525252;stroke-width:0" /> 
 
     </svg> 
 
    </div> 
 
</div>

這樣做的問題是，我的灰色條正確不大小到我的內容。有沒有人有任何建議？

Answer 1

在您的「居中內容」類中添加屬性「寬度：100％」，即應解決問題。希望這可以幫助。

Answer 2

要根據您的內容大小來調整灰色條的大小，我不會使用SVG。在這裏，我已經刪除了SVG，並且將內容封裝在旋轉的div中，與之前完成的方式完全相同。

寬度設置爲120％，以便div的邊緣被容器遮蓋。 div現在可以適應包含內容的高度，並且在內容堆疊時將會變大。

.box { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color:rgba(0,0,100,.0) 
 
} 
 

 
.centeredContent { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: rotate(7deg); 
 
    transform-origin: 0 0; 
 
    position: absolute; 
 
    background-color: #525252; 
 
    width: 120%; 
 
    padding: 40px 150px; 
 
} 
 

 
.rotateBack { 
 
    transform: rotate(-7deg) translateY(-10%); 
 
    margin: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="box"> 
 

 
    <div id="content1" class="centeredContent"> 
 
    <div class="row"> 
 

 
     <div class="col-lg-offset-1 col-md-4 rotateBack"> 
 
     <h2 style="color:#8aada8">topic 1</h2> 
 
     <p>Lorem...</p> 
 
     <button style="width:185px;height:52px;">Learn More</button> 
 
     </div> 
 

 
     <div class="col-lg-offset-2 col-md-4 rotateBack"> 
 
     <h2 style="color:#8aada8">topic 2</h2> 
 
     <p>Lorem ...</p> 
 
     <button style="width:185px;height:52px;">Learn More</button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>