独特的背景CSS设计

Question

我想在 "div" 上制作一个具有特定设计的 CSS 背景，并且该设计应该是响应式的（宽度和高度）。您可以查看使用属性 "div" 中的属性 "border" 生成的示例以及属性 "position absolute" 并将另一个 "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 响应式背景，其中未使用的图像示例 "border" 并且希望能够将文本或其他元素放入同一 div 中。

谢谢！

Answer 1

简单地使用渐变和多重背景：

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

<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>

独特的背景CSS设计

Peculiar background CSS design

html

css

background

css-shapes