Как нарисовать такую фигуру на css?

Question

Answer 1

Например как-то так. Тени можно сделать через box-shadow свойства.

.flag {
  width: 100px;
  height: 200px;
  background: red;
  position: relative;
}

.flag::after {
  content: "";
  position: absolute;
  bottom: -50px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

<div class="flag"></div>

Answer 2

Как вариант.

body {
  background: #ccc;
}

.flag {
  display: block;
  width: 135px;
  height: 135px;
  background: #fff;
  position: relative;
  box-shadow: 0 0 3px 0 #999;
}

.flag::after,
.flag::before {
  content: '';
  display: block;
  width: 95px;
  height: 95px;
  background: inherit;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: -1;
}

.flag::after {
  box-shadow: inherit;
}

.flag::before {
  z-index: 1;
}

<div class="flag"></div>

Answer 3

Такую фигуру можно создать при помощи clip-path: polygon, если она у Вас на сайте будет в первозданном виде, скажем так. Т.е. фигура, залитая одним цветом или градиентом, с каким-то уровнем прозрачности или без него, либо это будет фигура с фоновым изображением.

body {
  background: gray;
}

.elem {
  width: 120px;
  height: 220px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0% 70%);
}

<div class="elem"></div>

Но, если Вам нужно сделать обводку этой фигуры, скруглённые углы и т.д. то, лучше прибегнуть к помощи векторной графики и создать фигуру через SVG

БЛОГ НА HUSL

Как нарисовать такую фигуру на css?

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