CSS - Флаг Японии



Простой и понятный флаг - красный круг на белом фоне. Это же так просто, да? Ну да, просто. Зато можно нарисовать двумя разными, и интересными, способами.

Способ первый - "Круглый" квадрат.

Нарисуем прямоугольник нужных размеров:
.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.

Комментариев нет:

Отправить комментарий