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 >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/

CodePudding user response：

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

CodePudding user response：

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 >Text Content or Image</div>
<!-- a second element, demonstrating the possible "theming": -->
<div 
     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.