HTML5 тело фон CSS с треугольными формами

Question

Я работаю над новым веб-сайтом ASP.Net Core.Команда UX / UI разработала дизайн фона, который использует треугольные формы, похожие на прикрепленное изображение.У дизайна фактически есть небольшой градиент в пределах 2 различных цветов.Можно ли добавить фон для тела, которое выполняет что-то вроде этого.то есть

body {
    background: linear-gradient...
}

Более 60% наших пользователей используют мобильные устройства.Однако нам также нужна поддержка Internet Explorer 11 (но ничего раньше).Конечно, мы могли бы просто использовать простой цвет для браузеров, которые не поддерживают CSS, который мы в конечном итоге используем.

Answer 1

Вы можете использовать фон SVG.

См. Демонстрацию: https://codesandbox.io/s/ym88y296wj

Answer 2

Используйте несколько фонов, как это:

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

Answer 3

вы можете попробовать что-то подобное, используя Pseudo 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>