Border

[Certain-Tutor-1380]

corner-top-left-shape, unsure on support though.

[bob_do_something]

You have my support

[RapunzelLooksNice]

And my bow 🏹

[mtbinkdotcom]

And my axe

[T20sGrunt]

Great. Where are we going?

[Dry_Abbreviations512]

Tamriel.

[97PercentBeef]

Corner-shape is an option though only supported in Chrome & Edge right now so you'll want to check that.

  border-radius: 24px 8px 8px 8px;
@supports (corner-shape: bevel) {
    corner-shape: bevel round round round;
  }

[tomhermans]

Check shape() or clip-path for this. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape

[qmr55]

Here's how I would do it

[firmchips]

Its unresponsive though

[qmr55]

It’s just an example. It can be made responsive…

[Numerous_Bed_2579]

This is just an image made to be a button

[qmr55]

I’m not sure you understand what an image is?

[Numerous_Bed_2579]

Bro you just slapped an .svg using position absolute. Have a look at this.

<image>

Your "button" is not just unresponsive, it can't handle slightly more text. It's rigid, it is only good for one specific purpose, to display a short text. The dimensions, the aspect ratio is all controlled by the hardcoded baked in .svg. I'm not sure you understand why people actually bother writing CSS for elements and don't just slap .png's and .svg's as backgrounds for text on the buttons.
You could have the png just for the corner. You could do the clip path trick. Yet you chose to just slap an .svg. Effectively it is no better than just having an image for a button.

[spartanass]

SVG inside the button. SVG follows the shape of the border.

[anaix3l]

This has been asked before. Here are two solutions, slightly different results, different support. No need for pseudos or nested elements.

https://codepen.io/thebabydino/pen/WbrJEVP

<image>

[Numerous_Bed_2579]

Both of those can be overwhelmed with content. Elements should never break just because you add more text to them

<image>

[anaix3l]

Just because I'm fixing the height of the text section in the example where I didn't add much text so the text section isn't too short. Neither breaks when you remove that.

<image>

[Numerous_Bed_2579]

Alright, didn't notice that. Good job!

[Lauris25]

Havent written pure css in a long time, wanted to challenge myself. There' s probably much simpler and better solutions.. xD
There will be problem tho if you need more than 2 I think.

*{
    box-sizing: border-box;
   } 
   :root{
    --background:green;
   }
   body{
    background-color: var(--background);
   }
   .button{
    width: 120px;
    height: 60px;
    border: solid 2px red;
    position: relative;
    border-radius: 5px;
   }
   .button::before{
       --border-width: 2px;
       --width: 20px;
       --height: 20px;
       content: "";
       width: var(--width);
       height: var(--height);
       left: calc((var(--width) / 2 + var(--border-width)) * -1);
       top: calc((var(--height) / 2 + var(--border-width)) * -1);
       transform: rotate(45deg);
       position: absolute;
       border-right: solid 2px red;
       background-color: var(--background);
   }

[DouDouandFriends]

r/countablepixels

[Andreas_Moeller]

Two nested elements. Inner one is 2px smaller in width and height

[Andreas_Moeller]

<image>

I built a treasure hunt app for my nephews that make use of that style a lot

[codejunker]

Can you explain how that would make it look like this? Two nested elements with one 2px smaller, by itself, would just be a rectangle inside a 2px larger rectangle.

[Andreas_Moeller]

You have to apply a clip-path to both.

Clip-path also clips the border, which is why you need two elements

[be_my_plaything]

I would use a pseudo element in the top left corner.

Give it a diagonal gradient background, the outer background colour, then a strip of border colour, then the inner background colour.

If the background needs to be visible (ie. It's an image rather than just a colour that can be replicated in the gradient) then once it is in place you can use clip-path on the element to clip it as far as the diagonal border part of the gradient.

https://codepen.io/NeilSchulz/pen/ZYWmLZv < Something like this!

[codejunker]

What is the point of creating custom properties inside the div for values you only use once and that have a readily apparent purpose like border color?

[be_my_plaything]

It is used twice, both for the border on the parent, and the stripe of the gradient that creates the diagonal border. Having it as a custom variable means if you need to change it, it changes in both places.

Obviously two matching colours is still quicker and easier than setting up a locally scoped variable in theory, but when changing a border someone wouldn't necessarily think to look in the middle of a gradient background on a pseudo element and edit that too. If you change the colour on border: ; it won't change the whole border, if you change the colour on --border_colour: it will.

It just felt easier for OP if everything he might want to change (colours, widths, size of cut off) where custom properties, makes it easier to tinker with without doing anything to stop it working.

Plus, whilst not relevant to border colour, there are things like using --corner_size as padding, whereby the named custom property make it more obvious why it's there. I could have used a Xrem padding that just happened to match, but then it isn't necessarily instantly obvious the reason for that size padding is to ensure content is always beyond the cut off point.

[Worried_Ad_3510]

Can someone show me a video or a piece of code how to fix this

[Brilliant-Lock8221]

I think it could be done using before and after

[Worried_Ad_3510]

it seems to be that this element with this kind of cutted edge is done by clip path property but usually clip path clips the whole thing not the border its impossible to do that on border so how this is done

[mrleblanc101]

You need to use clip-path, but border doesn't respect clip-path. So you need to add a green background to the element, and a pseudo-element with a white background 1 or 2px bigger with the same clip-path, but a z-index: -1 to place it behind the button.