Помогите разобраться. Что за код написан к “square-top-right”, я сам сделать не смог и удивился что за показатели в ответе. Вот грубо говоря задание, которое надо написать “Цвета: белый 30% непрозрачности, прозрачный, белый 30% непрозрачности, прозрачный */”, а код к нему как-будто совсем другой.Кто может объяснить, почему проценты другие, не как в задании, почему transparent’ов больше чем написано в задании?
Код
.square-top-left {
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%
);
}
.square-top-right {
background-image: linear-gradient(
225deg,
rgba(255, 255, 255, 0.3) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 75%
);
/* Цвета: белый 30% непрозрачности, прозрачный, белый 30% непрозрачности, прозрачный */
}
.square-bottom-right {
background-image: linear-gradient(
315deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%
);
}
.square-bottom-left {
/* Цвета: белый 50% непрозрачности, прозрачный, белый 50% непрозрачности, прозрачный */
}
.squares {
margin: 70px auto;
width: 300px;
height: 300px;
background-color: #3498db;
}
.square {
float: left;
width: 50%;
height: 150px;
}
html,
body {
margin: 0;
padding: 0;
}