Можно ли сделать div с треугольным низом и обводкой?

Question

[IIIu6ko]

Подскажите как сделать вот такую фигуру из дива


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

Answer 1

[Сергей Горячев]

Градусы, размеры и остальное подбирайте под свою фигуру.
https://jsfiddle.net/v8v0swa4/

.div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
  border-bottom: 0;
  position: relative;
}
.div:after, .div:before {
  position: absolute;
  content: '';
  width: 57px;
  border-top: 3px solid red;
  bottom: -11px;
}
.div:before {
  left: -4px;
  transform: rotate(20deg);
}
.div:after {
  right: -4px;
  transform: rotate(-20deg);
}

Comments

[IIIu6ko]

Спасибо! Прям то, что надо.

[IIIu6ko]

А не подскажите как заливку сделать?

[Сергей Горячев]

Александр Шибков: А нельзя было сразу описать нормально задачу? Сейчас.

[Сергей Горячев]

Александр Шибков: https://jsfiddle.net/tebgww02/1/
В зависимости от задачи и скринов делаются решения.
Тут совсем другой подход, но теперь это ваша проблема))) Переделывать придется вам)

[IIIu6ko]

Sergey Goryachev: чертов волшебник. Пойду разбираться как работает) Спасибо ещё раз :)

[IIIu6ko]

Sergey Goryachev: Кстати, можно было и с помощью первого способа сделать. Вот решение https://jsfiddle.net/oehevsy7/

[Сергей Горячев]

Александр Шибков: Ну, вот видишь, сам все решил.

Answer 2

[Владислав Бойченко]

Попробуйте задать этот синий бордер фигуре через outline.

Comments

[IIIu6ko]

Если самому блоку задавать outline, то он не охватает after, а если задавать для after, то вот что выходит. Обховодит даже невидимые части..
codepen.io/anon/pen/zNYQOa