响应三角形在CSS中的风格背景

Question

我想要制作一个背景，就像我附上的图像一样，我知道它不是一个三角形，但它是我能想到的最好的词。出于回应的原因，我不想将图像用作背景，但是有没有办法创建像这样的图像？

Answer 1

您可以使用linear-gradient和background-size：（轻松反转以叠加它们）

div {
  padding:7.5% 1em;
  margin:-2.5% 1em;
  background:linear-gradient(178deg , transparent 30%, #A65417 31%) top left no-repeat,
    linear-gradient(2deg, transparent 30%, #A65417  31%) bottom left no-repeat;
  background-size: 100% 51%;
}
div:nth-child(even) {
    background:linear-gradient(-178deg , transparent 30%, #A65417 31%) top left no-repeat,
    linear-gradient(-2deg, transparent 30%, #A65417  31%) bottom left no-repeat;
  background-size: 100% 51%;
}
html {/* see transparency */
  background:linear-gradient(30deg,gray,purple,yellow,lime,tomato);
  padding:5% 0
}

<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>

Answer 2

<style>
  .parent {
    width: 500px; height: 300px;
    position: relative;
    background: #f00;
    overflow: hidden;
  }
  .parent:before, .parent:after {
    content: '';
    width: 200%; height: 100px;
    left: -50%;
    margin: -50px 0;
    position: absolute;
    background: #fff;
  }

  .parent:before {
    top: 0;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  .parent:after {
    bottom: 0;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
</style>

<div class="parent"></div>

Answer 3

这样的事可能是https://jsfiddle.net/dkfm7ymo/3/

<div id="trapezoid"></div>

#trapezoid { border-right: 450px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; height: 100px; width: 0px; }