Question

我需要使用符合以下要求的角度div元素布局网站：

当列并排显示时，各部分的高度必须为~400像素;当列垂直折叠时，部分的高度必须为~800像素。理想情况下，这会自动调整到所附内容。
必须以锁定 7度
屏幕的完整宽度
必须能够包含图像背景而不仅仅是纯色

示例：

到目前为止的代码：

.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)
	}

.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

在你的＆＃34; centeredContent＆＃34; class add attribute＆＃34; width：100％＆＃34;，这应该可以解决问题。希望这会有所帮助。

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>

带内容的角度div

2 个答案: