Html5 body background css с треугольными формами

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

body {
    background: linear-gradient...
}

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

Proposed background

0
0
61
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
Ответ принят как подходящий

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

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

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

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

Другие вопросы по теме