Три цвета фона расположенные под углом

236

30 марта 2017, 18:34

Как мне получить фон, похожий на этот образ:

Только 3 цвета, которые идут от верхнего угла, как солнечный луч.

Может быть, лучше использовать простой PNG или SVG для фонового изображения?

Перевод вопроса: Three colors angled background color @Chris

Answer 1

SVG

Это можно сделать с помощью SVG. Я использовал три polygon. Они установлены на фоновое изображение. Или альтернативно их использовать inline, чтобы вы могли применить на них свойства CSS.

html, body { 
  margin: 0; 
  padding: 0; 
} 
.triple { 
  width: 250px; 
  height: 250px; 
} 
.triple:hover { 
  width: 500px; 
  height: 100px; 
}

<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none"> 
  <polygon fill="#dd2" points="0,0 100,0 0,60" /> 
  <polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " /> 
  <polygon fill="#992" points="30,100 100,0 100,100" /> 
</svg>

Перевод ответа: Three colors angled background color @Persijn

Answer 2

Ну такой "кривой" вариант на css с помощью border:

.bg { 
  position:absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
   
  overflow: hidden; 
  background: #16334a; 
} 
 
.bg:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  border-bottom: 100vh solid #204158;  
  border-left: 70vw solid transparent; 
} 
 
.bg:before { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top: 0; 
  border-top: 70vh solid #0a253e;  
  border-right: 100vw solid transparent; 
} 
 
.inner { 
  position: relative; 
  z-index: 5; 
  color: #ccc; 
  text-transform: uppercase; 
  font-family: Arial; 
  text-align: center; 
  top: 40%; 
}

<div class="bg"> 
  <div class="inner"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, impedit. 
  </div> 
</div>

Answer 3

CSS

Эффект может быть достигнут с помощью использования псевдоэлементов и преобразований CSS.
Ниже приведен фрагмент кода.
Но я не думаю, что использование CSS является правильным вариантом для этого.
Лучше использовать PNG-изображение.
Фрагмент использует пару псевдоэлементов с разными цветами фона, скошенными (skewed) под требуемыми углами, для получения трехцветного эффекта.

.bg { 
  position: relative; 
  height: 200px; 
  width: 400px; 
  padding: 4px; 
  background: orange; 
  overflow: hidden; 
} 
.bg:after, 
.bg:before { 
  position: absolute; 
  content: ''; 
  left: 0px; 
  height: 100%; 
  width: 100%; 
  transform-origin: right top; 
} 
.bg:before { 
  top: 0px; 
  background: red; 
  transform: skewY(-45deg); 
} 
.bg:after { 
  top: -100%; 
  background: yellow; 
  transform: skewY(-15deg); 
} 
span { 
  position: relative; 
  z-index: 2; 
} 
 
/* Just for demo */ 
.bg:hover { 
  height: 200px; 
  width: 500px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
<div class="bg"> 
  <span>Some content inside</span> 
</div>

Answer 4

clip-path (SVG-fallback для FF) и псевдоэлементы.

body { 
  margin: 0; 
} 
 
#clips { 
  display: block; 
  height:0; 
  width:0; 
  overflow: hidden; 
} 
 
div { 
  height: 100vh; 
  position: relative; 
  background-color: #000; 
} 
 
div:before, div:after { 
  position: absolute; 
  content: ''; 
  width: 100%; 
  height: 100%; 
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 60%); 
  clip-path: url(#clip1); 
  clip-path: polygon(0% 0%, 100% 0%, 0% 60%); 
  background-color: #ccc; 
} 
 
div:before { 
  -webkit-clip-path: polygon(100% 0%, 60% 100%, 0% 100%, 0% 60%); 
  clip-path: url(#clip2); 
  clip-path: polygon(100% 0%, 60% 100%, 0% 100%, 0% 60%); 
  background-color: #666; 
}

<div></div> 
 
<svg id="clips"> 
  <defs> 
    <clipPath clipPathUnits="objectBoundingBox" id="clip1"> 
      <polygon points="0,0 1,0 0,0.6" /> 
    </clipPath> 
    <clipPath clipPathUnits="objectBoundingBox" id="clip2"> 
      <polygon points="1,0 0.6,1 0,1 0,.06" /> 
    </clipPath> 
  </defs> 
</svg>