Градиент 3 Паттерн

by fersterin

HTML

<div></div>
<div class="add"></div>
<div class="add1"></div>

CSS

div {
	margin: 0px;
	height: 60vh;
	width:  60vh;
	background: linear-gradient(30deg, #2E86C1, deeppink 20%, yellow 30%, #82E0AA);
	display: inline-block;
}
body {
	margin: 0;
}
.add {
	background: linear-gradient(transparent 50%, lime 50%);
	/* По умолчанию 180deg */
}
.add1 {
	height: 20vh;
	width:  20vh;
	background: linear-gradient(45deg,transparent 50%, deeppink 50%, deeppink 60%,transparent 60%), linear-gradient(45deg,deeppink 10%,transparent 10%) repeat;
  background-size: 1em 1em;
	}
/*
## Точки остановки
deeppink 50% - устанавливаем цвет в середину (50% от низа до верха то есть ось y)
yellow 50% - устанавливаем цвет в середину
Получаем четкую границу цветов

*/