div with slanted side and rounder corners

Question

I am currently building a website which requires buttons to have a slant on the left hand side of the button. The website is responsive and the button requi

Answer 1

This is also possible using CSS border-radius' by setting multiple values.

This does have a bit more curvature than your example image but it is much cleaner and doesn't require extra elements or pseudo elements.

body {
  background: lightblue;
  font-family: sans-serif;
}
div {
  background: purple;
  width: 200px;
  padding: 30px;
  border: 3px solid white;
  border-radius: 15px;
  border-bottom-left-radius: 50px 150px;
  color: white;
}

Some Text