CSS Styling Left and bottom border with angled tip - css

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

One approach is as follows, which does allow for easy changes to be made via CSS custom properties; the code is below with explanatory comments in the code:
/* CSS custom properties to handle the border's
color and size: */
:root {
--borderColor: #f00;
--borderSize: 10px;
}
/* simple reset to remove default margins and padding,
and also forcing browsers to use the same basis for
calculating element sizes: */
*,
::before,
::after {
/* includes any assigned padding and border-widths
in the declared size of the element: */
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: blue;
/* for no reason other than easily placing the contents of
the element to the vertical center and left (inline-start): */
display: grid;
place-content: center start;
block-size: 20vh;
/* allows for responsive sizing, the preferred size is 80vw
(80% of the viewport width), but with a minimum size of
20rem and a maximum size of 1200px: */
inline-size: clamp(20rem, 80vw, 1200px);
/* in romantic languages, derivatives of Italian (English,
German...) this is the top/bottom margin; we're using
logical properties in order that other languages might be
laid out appropriately for their own languages' inline and
block axes): */
margin-block: 20vh;
/* in romantic languages (as above) this is equivalent to
left/right margin: */
margin-inline: auto;
/* as above, but here we set padding on the inline-axis (left/right
in romantic languages and derivatives): */
padding-inline: 1em;
/* to allow absolute positioning for pseudo-elements: */
position: relative;
}
.container::before,
.container::after {
content: '';
background-color: var(--borderColor);
position: absolute;
transform-origin: right top;
}
.container::before {
/* taking the full size of the block axis of the parent: */
block-size: 100%;
/* sizing the inline axis to the desired size of the "border" */
inline-size: var(--borderSize);
top: 0;
right: 100%;
/* skewing the normal quadrilateral shape of an HTML element: */
transform: skewY(-45deg);
}
.container::after {
/* the size of the desired "border": */
block-size: var(--borderSize);
/* the full inline size of the parent: */
inline-size: 100%;
top: 100%;
left: 0;
transform: skewX(-45deg);
}
<!-- the original HTML: -->
<div class="container">Text Content or Image</div>
<!-- a second element, demonstrating the possible "theming": -->
<div class="container"
style="--borderColor: lightskyblue;
--borderSize: 2em;
background-color: palegreen;">Text Content or Image</div>
JS Fiddle.
It's worth noting though that there is a slight problem with this approach, where the two pseudo-elements meet, on the lower-left, there is a visible sliver of the background-color of whatever is behind the element.

Answer 2

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 :(

Answer 3

clip-path with border can do it. I added a CSS variable to easily control the size of the shadow
.box {
--s: 10px; /* control the size of the shadow */
background-color: blue;
margin: 50px;
height: 100px;
border: solid #f71e1e; /* the color here */
border-width: 0 0 var(--s) var(--s);
clip-path: polygon(0 var(--s),var(--s) 0, 100% 0,100% 100%,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);
}
<div class="box"></div>
Also with multiple background to have less code:
.box {
--s: 10px; /* control the size of the shadow */
margin: 50px;
height: 100px;
background:
linear-gradient(blue 0 0) calc(100% + var(--s)) calc(-1*var(--s)) no-repeat,
#f71e1e;
clip-path: polygon(0 var(--s),var(--s) 0, 100% 0,100% 100%,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);
}
<div class="box"></div>