Adding CSS Trapezoid Shape :After Button

Question

I'm attempting to create a button style for a client, and cannot seem to get it working using the after pseudo-class.

<style>
$varBase: 40px;
$imsblue: #012169;
$imsgrey: #012169;

body {
  background:grey;
}

.btn {
  position: relative;
  float: left;
  height: $varBase;
  font-family: sans-serif;
  text-align: center;
  line-height: $varBase;
  color: white;
  white-space: nowrap;
  text-transform: uppercase;
  background: $imsblue;
  &:before {
    float: left;
    content:"";
    width: ($varBase/4);
    height: ($varBase/2);
  }
  &:after {
    position: absolute;
    content:"";
    height: ($varBase/2);
    border-left: ($varBase/2) solid $imsblue;
    border-bottom: ($varBase/2) solid transparent;
  }
  a {
    color: white;
    text-decoration:none;
    padding: ($varBase/4) ($varBase/2);
    margin-right: -10px;
  }
}
.btn3 {
  display: inline;
  color: white;
  background: linear-gradient(135deg, rgba(1,33,105,1) 0%, rgba(1,33,105,1) 93%, rgba(30, 87, 153, 0) 93%, rgba(30, 87, 153, 0) 100%);
  outline: 0;
  border: 0;
  padding: 10px 0px;
  a {
    color: inherit ;
    text-transform: uppercase;
    text-decoration:none;
    padding: ($varBase/4) $varBase;
  }
}
</style>
<div class="btn"><a href="#">Click to Submit</a></div>
<div class="btn3"><a href="#">Click to Submit</a></div>

I can get it to show using two DIVs, but I need this to work with just one class. Can someone help me see what I'm doing wrong?

It's supposed to look like this (barring color and size of course):

Answer 1

I believe the key element missing is that you need to include a content:"" in your :after pseudoclass. See the example below.

.btn {
  height: 40px;
  background: red;
  width: 128px;
  float:left;
}

.btn:after {
    width: 0px;
    height: 20px;
    border-left: 20px solid red;
    border-bottom: 20px solid white;
    float:right;
    content:"";
}

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