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>