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

Answer 1

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>