仅 CSS 2 条纹背景（倾斜）[重复]答案

【问题标题】：CSS only 2 striped background (skewed) [duplicate]仅 CSS 2 条纹背景（倾斜）[重复]
【发布时间】：2016-07-10 20:19:50
【问题描述】：

一直在研究一种仅使用 CSS 制作两个条纹背景的方法。试图做到这一点：

【问题讨论】：

您可以使用有角度的线性渐变（如 question 中的第二个 sn-p （角度需要更改）-stackoverflow.com/questions/30441122/…）。我确信这是一个骗局，但无法找到完美的。

标签： css

【解决方案1】：

您可以通过linear-gradient 做到这一点

body, html {
  margin: 0;
  padding: 0;
}

div {
  min-height: 100vh;
  background: linear-gradient(65deg, white 50%, #5C8F09 50%);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

完美！谢谢，我会尽快接受。

【解决方案2】：

您可以使用gradient background 来实现此效果。

我喜欢用这个background generator，在线玩。

这是demo。

您需要调整色标。

body {
  height: 100vh;
  width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3232+0,ff3030+48,ffffff+48 */
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff3232 0%, #ff3030 48%, #ffffff 48%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff3232 0%,#ff3030 48%,#ffffff 48%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff3232 0%,#ff3030 48%,#ffffff 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<div>
</div>

【讨论】：