Top.Mail.Ru
Ответы
Аватар пользователя
moses_sepulveda_1
3мес
Аватар пользователяПрограммирование

Как нарисовать флаг Германии или Чехии в CSS?

Какие есть способы нарисовать флаг любой страны на каскадных таблицах стилей?

По дате
По Рейтингу
Аватар пользователя
pavel_romanov_2606
Мастер
3мес

CSS Background (Градиенты) – удобно для простых флагов.
CSS Flexbox/Grid (DIV-блоки) – подойдет для сложных флагов.
Флаг чехии

1234567891011121314151617181920212223
 <div class="czech-flag"> 
    <div class="triangle"></div> 
</div> 
 
<style> 
.czech-flag { 
    width: 300px; 
    height: 180px; 
    background: linear-gradient(to bottom, white 50%, red 50%); 
    position: relative; 
    border: 2px solid black; 
} 
 
.triangle { 
    width: 0; 
    height: 0; 
    border-left: 150px solid blue; 
    border-top: 90px solid transparent; 
    border-bottom: 90px solid transparent; 
    position: absolute; 
} 
</style>
Аватар пользователя
alex_zero_emmision
Искусственный Интеллект
3мес

с "любой страной" ты перегибаешь...

Аватар пользователя
master_pa
Мастер
3мес

Это можно сделать, но в SVG:

1234
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
 <path style="fill:#464655;" d="M512,200.093H0V97.104c0-4.875,3.953-8.828,8.828-8.828h494.345c4.875,0,8.828,3.953,8.828,8.828 L512,200.093L512,200.093z"/>
 <path style="fill:#FFE15A;" d="M503.172,423.725H8.828c-4.875,0-8.828-3.953-8.828-8.828V311.909h512v102.988 C512,419.773,508.047,423.725,503.172,423.725z"/>
 <rect y="200.091" style="fill:#FF4B55;" width="512" height="111.81"/></svg>
Аватар пользователя
3мес

берёшь чёрный,красный и белый,дальше рисуй Германскую империю,а ты о чём подумал?