Фон со звездами. Градиентом

245

07 марта 2017, 15:34

Всем здравствуйте.

Я недавно начал заниматься градиентами. Но попал в интернете на картинку фона созданную с помощью градиента. Подскажите, как такое можно градиентом сделать. Весь мозг уже поломал.

Мои попытки:

.super-star { 
  width: 300px; 
  height: 300px; 
  background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; 
  background-color: #232927; 
  background-size: 100px 100px; 
}

<div class="super-star"> 
</div>

Answer 1

У вас всё правильно, но вы не так указали направления градиентов

.super-star { 
  width: 300px; 
  height: 300px; 
  background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; 
  background-color: #232927; 
  background-size: 100px 100px; 
}