css - CSS 中的响应式三 Angular 形样式背景

Question

我想做一个背景，就像我附上的图片一样，我知道它不完全是三 Angular 形，但这是我能想到的最好的词。出于响应原因，我不想使用图像作为背景，但是有没有办法创建类似该图像的东西？

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>