html - 添加 CSS 梯形形状 :After Button

Question

我正在尝试为客户端创建按钮样式，但似乎无法使用 after 伪类使其正常工作。

<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>

我可以使用两个 DIV 来显示它，但我只需要它来处理一个类。有人可以帮我看看我做错了什么吗？

它应该看起来像这样(当然除了颜色和尺寸):

Answer 1

我认为缺少的关键元素是您需要在 :after 伪类中包含一个 content:""。请参见下面的示例。

.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>