div mit schrägen Seiten und runderen Ecken

Ich erstelle gerade eine Website, für die Schaltflächen ein @ aufweisen müsseslant auf der linken Seite der Taste. Die Website reagiert und der Button erfordertabgerundete Ecke auch. Ich versuche zu vermeiden, Hintergrundbilder zu verwenden.

Würde mir jemand eine Lösung dafür zeigen können? Ignorieren Sie das Symbol auf der Schaltfläche, ich kann dies tun. Ich brauche nur die schräge Seite.

Sample jsfiddle

body {
  background: lightblue;
  font-family: sans-serif;
}
div {
  background: purple;
  width: 200px;
  padding: 30px;
  border: 3px solid white;
  color: white;
}
<div>Some Text</div>