CSS special shape with one shaved corner [duplicate]

Question

I try to make a button with one corner shaved, I was searching around the web but could't find a method to create it like that.

The thing I tried is the following css code:

   #button {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  height: 0;
  width: 100px;
}

But as you can see, it does..:

Any help would be great

You might find an answer here; stackoverflow.com/questions/7324722/cut-corners-using-css — Laura
– Laura, Commented Jan 6, 2020 at 8:33
Thank you very much for this super fast answer, this is what I needed @Laura — Hessel
– Hessel, Commented Jan 6, 2020 at 8:44

Pedram · Accepted Answer · 2020-01-06 08:45:55Z

5

Have you consider using clip-path? You can try this

.path {
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 29%);
  width: 100px;
  height: 60px;
  background-color: tomato;
}

<div class="path"></div>

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

answered Jan 6, 2020 at 8:36

louie kim

5094 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sorry for late answer, but this was the fix for me!