Флажок на html/css

#html #css

Можно ли как-нибудь воссоздать такой флажок на css/html?



p.s. - интересует только флажок,без жёлтой полосы.
    

Ответы

Ответ 1

Например так:



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;
}



Ответ 2

еще как вариант



.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%);
}



Ответ 3






Ну и я свои пять копеек вставлю


Ответ 4

Создаешь блок и добавляешь стили



.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;
}
 



Ответ 5

Флажок можно разбить на 3 фигуры: 1 прямоуглольник и 2 треугильника.

Прямоугольник можно сделать простым дивом, с красным бэкгрундом.

Сдесь описано как на html+css создавать треугольники.