Угловая ДИВ с содержанием

Question

У меня есть требование, чтобы макет сайта с угловыми Div элементов, которые отвечают следующим требованиям:

1. Высота секций должна быть ~ 400 точек при отображении темы бок о бок и ~ 800px, когда столбцы разбиваются вертикально. В идеале это автоматически подстраивается под прилагаемый контент.
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

В вашем классе «centeredContent» добавьте атрибут «width: 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>