CSS Styling Left and bottom border with angled tip

Question

I'm trying to get some angle on the tip of a left and bottom border on a div or image. Can't seem to replicate this kind of style Desired Output

This is what I have come up so far. When using borders angle tips are pointing outwards though

Using box shadow

<div class="container">Text Content or Image</div>

.container {
  background-color: blue;
  padding: 100px;
  box-shadow: -10px 20px 0px 5px #f71e1e;
}

Using border

.container {
  background-color: blue;
  padding: 100px;
  border-bottom: 15px solid #f71e1e;
  border-top: 15px solid white;
  border-left: 15px solid #f71e1e;
  border-right: 15px solid white;
}

https://jsfiddle.net/su8we1vq/

Answer 1

The easiest way to achieve this would be by using multiple box-shadow, like this:

.container {
  background-color: blue;
  padding: 100px;
  box-shadow: -1px 1px 0px #f71e1e,
    -2px 2px 0px #f71e1e,
    -3px 3px 0px #f71e1e,
    -4px 4px 0px #f71e1e,
    -5px 5px 0px #f71e1e,
    -6px 6px 0px #f71e1e,
    -7px 7px 0px #f71e1e,
    -9px 9px 0px #f71e1e,
    -10px 10px 0px #f71e1e;
}

Yeah, it doesn't look pretty syntax-wise but hey :(