Простой и понятный флаг - красный круг на белом фоне. Это же так просто, да? Ну да, просто. Зато можно нарисовать двумя разными, и интересными, способами.
Способ первый - "Круглый" квадрат.
Нарисуем прямоугольник нужных размеров:
.japan-flag {
height: 400px; width: 600px;
border: solid 1px #000000;
}
Затем нарисуем красный квадрат и разместим его по центру:
.japan-flag::after {
position: absolute;
top: 80px; left: 180px;
display: block; content: "";
height: 240px; width: 240px;
background-color: #ED2939;
}
И в конце, просто "максимально загнём" углы красного квадрата:
border-radius: 50%;
Итог:
.japan-flag {
position: relative;
height: 400px; width: 600px;
border: solid 1px #000000;
}
.japan-flag::after {
position: absolute;
top: 80px; left: 180px;
display: block; content: "";
height: 240px; width: 240px;
background-color: #ED2939;
border-radius: 50%;
}
Всё. Для этого варианта мы использовали один див и один псевдо-элемент. Но, можно и проще.
Способ второй - "Круглый" градиент.
К стилизации белого прямоугольника добавляем radial-gradient:
background: radial-gradient(
circle at center,
#ED2939 120px,
#ffffff 120px
);
Код целиком:
.japan-flag-radial {
height: 400px; width: 600px;
border: solid 1px #000000;
background: radial-gradient(
circle at center,
#ED2939 120px,
#ffffff 120px
);
}
See the Pen Japan Flag by Sergey Zlomorda Drushchits (@Zlomorda) on CodePen.
Комментариев нет:
Отправить комментарий