三角形的HTML5正文背景CSS

Question

我正在一个新的ASP.Net Core网站上。 UX / UI团队提出了一种背景设计，该背景设计使用类似于所附图像的三角形形状。实际上，该设计在2种不同颜色之间略有渐变。是否有可能为完成此类目标的身体添加背景。即

focusout

我们超过60％的用户使用移动设备。但是，我们还需要支持Internet Explorer 11（但没有更早的支持）。对于不支持最终最终使用的CSS的浏览器，我们当然可以使用纯色。

Answer 1

您可以使用伪CSS尝试类似的操作。

body{
  background:#ddd;
}
  .quote {
  background: #ccc;
  position: relative;
  z-index: 1;
}

.quote:before,
.quote:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}

.quote:before {
  top: 0;
  -webkit-transform: skewY(8.5deg);
  transform: skewY(8.5deg);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.quote:after {
  bottom: 0;
  -webkit-transform: skewY(-8.5deg);
  transform: skewY(-8.5deg);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}

.quote {
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  margin: 50px 0;
  padding: 20% 20px;
  text-align: center;
}

h1 {
  font-size: 32px;
  font-weight: 500;
}

p {
  font-size: 14px;
  font-weight: 300;
  margin-top: 0.5em;

<div class="quote">
  <h1>Triangular shapes</h1>
  <p>With 2 Pseudo Elements</p>
</div>

Answer 2

您可以使用SVG背景。

请参阅演示：this document

Answer 3

像这样使用多个背景

body {
 margin:0;
 height:100vh;
 background:
  linear-gradient(to top right,transparent 49.8%,#d2d2d2 50%) top right/30% 30%,
  linear-gradient(to bottom right,transparent 49.8%,#d2d2d2 50%) bottom right/40% 40%,
  #a8a8a8;
 background-repeat:no-repeat;
}