Сделать изображение Флажки на css/html ОЧЕНЬ НУЖНО

Question

Сделать изображение флажки в css/html очень нужно, уже все перерыл нигде нету

Answer 1

треугольник

.flag {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 200px;
  border-color: #dd0000 transparent transparent transparent;
}

.flag:before {
  content: '';
  position: absolute;
  left: -180px;
  top: -192px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 180px 180px 0 180px;
  border-color: white transparent transparent transparent;

}

.flag:after {
  content: '';
  position: absolute;
  left: -140px;
  top: -177px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 140px 140px 0 140px;
  border-color: #dd0000 transparent transparent transparent;
}

<div class = 'flag'></div>

прямоугольник:

.flag {
  position: relative;
  width: 75px;
  height: 150px;
  
  border: 5px solid #dd0000;
}

.flag:after {
  content: '';
  position: absolute;
  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 150px 75px;
  border-color: transparent transparent #dd0000 transparent;  
}

<div class = 'flag'></div>

БЛОГ НА HUSL

Сделать изображение Флажки на css/html ОЧЕНЬ НУЖНО

Ответы (1 шт):