Можно ли сделать div с треугольным низом и обводкой?
Градусы, размеры и остальное подбирайте под свою фигуру.
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);
}
Попробуйте задать этот синий бордер фигуре через outline.