4

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

Флажок

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

1
  • 4
    да, можно воссоздать на css/html
    – Grundy
    4 июл 2016 в 19:28

5 ответов 5

11

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

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>

4

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

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

3

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

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

3

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

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

0

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.