奇特的背景CSS设计

Question

我想用特定的设计制作一个关于“div”的CSS背景，这个设计应该是响应式的（宽度和高度）。您可以使用属性“position absolute”查看使用“div”内的属性“border”生成的示例，并将另一个“div”分开，但此示例不正确，因为当我增加屏幕时，宽度不是100 ％。

图像（紫色和透明色）：

代码：

.trape {
  min-height: 250px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  position: absolute;
  border-right: 2000px solid;
  border-right-color: #b60f80;
}

<link href="http://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="container">
    <div class="trape"></div>
    <div class="col-xs-12 col-md-12 text-centeR">
      <h2 class="white">¡TEXT MODEL!</h2>
      <p>SIMULATION TEXT ALING MIDDLE</p>
    </div>
  </div>
</div>

结论：

我想生成css背景响应图像例如未使用的“边框”，并希望能够将文本或其他元素放在同一个div中。

谢谢！

Answer 1

只需使用渐变和多个背景：

＆＃13;

＆＃13;

.box {
  color:#fff;
  padding:30px 0 30px;
  background:
   linear-gradient(to bottom left,#b60f80 49%, transparent 51%) bottom/100% 30px no-repeat,
   linear-gradient(to top left,#b60f80 49%, transparent 51%) top/100% 30px no-repeat,  
   linear-gradient(#b60f80,#b60f80) center/100% calc(100% - 60px) no-repeat;
}

body {
 background:#ccc;
}

＆＃13;

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, sit amet pharetra ex blandit luctus. Morbi facilisis vel est eu interdum. Sed semper, erat a molestie tincidunt, purus velit luctus dolor, nec tristique ex neque eget tortor. Vestibulum a rhoncus ex. Aenean neque massa, porta a nulla non, faucibus pretium magna
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, 
</div>

＆＃13;

＆＃13;

＆＃13;