CSS slash border

Question

As seen in the picture, the background colour is magenta and the button is white. Right bottom corner of the button is not either rectangular or rounded but kind of slash off.

Can I achieve this using CSS?

yes, you can do it by CSS – Nisharg Shah Apr 27 '20 at 17:59 — Nisharg Shah, Apr 27 '20 at 17:59
@NishargShah can you refer me to an example? – Sameera Thilakasiri Apr 27 '20 at 18:07 — Sameera Thilakasiri, Apr 27 '20 at 18:07
I added an answer, lookout – Nisharg Shah Apr 27 '20 at 18:14 — Nisharg Shah, Apr 27 '20 at 18:14

score 1 · Accepted Answer · answered Apr 27 '20 at 18:11

Here is the example with new property clip-path.

You can do experiments on https://bennettfeely.com/clippy/ site

div {
  width: 100px;
  min-height: 50px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  background: lightblue;
}

<div class="btn">
    button
</div>

CSS slash border

1 Answers1