Можно ли как-нибудь воссоздать такой флажок на css/html?
p.s. - интересует только флажок,без жёлтой полосы.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНапример так:
body {
background-color: white;
}
.flag {
background-color: red;
width: 100px;
height: 200px;
position: relative;
}
.flag::before {
content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
bottom: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid white;
}
<div class="flag"></div>
еще как вариант
.flag {
background-color: red;
width: 100px;
height: 150px;
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
<div class="flag"></div>
Создаешь блок и добавляешь стили
.flag {
background-color: #000;
position: relative;
width: 40px;
height: 80px;
}
.flag:before {
content: '';
display: block;
position: absolute;
top: 100%;
border-left: 20px solid #000;
border-right: 20px solid #000;
border-bottom: 20px solid transparent;
}
<div class="flag"></div>
<svg style="width:150px;height:200px;">
<polygon
points="10 190, 10 10 ,140 10,140 190,70 80 "
style="fill: red; fill-opacity:1; stroke: red;" />
</svg>
Ну и я свои пять копеек вставлю
Флажок можно разбить на 3 фигуры: 1 прямоуглольник и 2 треугильника.
Прямоугольник можно сделать простым дивом, с красным бэкгрундом.
Сдесь описано как на html+css создавать треугольники.