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

Yes You can do using an white overlay using css-pseudo element before or after like this

.slantButton {
  position: relative;
  background-color: #8D3F81;
  border: 1px solid transparent;
  border-radius: 5px 5px 5px 20px;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 18px;
  cursor: pointer;
  outline: 0;
}
.slantButton:before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  border-bottom: 42px solid #fff;
  border-right: 16px solid transparent;
}

Call Me Back

Explaination

I have applied different border radius to bottom left corner using

border-radius: 5px 5px 5px 20px;

Then using css triangle in pseudo element. Made one white overlay of triangle and made slant edge as you suggested

    .slantButton {
      position: relative;
      background-color: #8D3F81;
      border: 1px solid transparent;
      border-radius: 5px 5px 5px 20px;
      color: #fff;
      padding: 10px 20px;
      text-transform: uppercase;
      font-size: 18px;
      cursor: pointer;
      outline: 0;
    }
    .slantButton:before {
      content: '';
      position: absolute;
      top: 0;
      left: -5px;
      width: 0;
      height: 0;
      border-bottom: 42px solid rgba(0,0,0,0.5);
      border-right: 16px solid transparent;
    }

Call Me Back