Html 如何扭曲聚焦元素的轮廓？

我有一个定制的按钮/链接元素，它将所述元素转换为如下所示：

我遇到的问题是，当使用键盘聚焦按钮时，轮廓并没有沿着元素的边界变换。我也尝试过使用长方体阴影，得到了相同的结果。是否有一种正确的方法来转换大纲，就像我对元素本身所做的那样

.button {
  font-family: $brand-font;
  font-weight: 900;
  transition: color $transition-duration ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  text-align: center;
  max-width: 320px;
  min-width: 200px;
  height: 40px;
  line-height: 40px;
  position: relative;
  border: none !important;
  font-size: 1.4rem;
  z-index: 0;
  padding: 0 1.8rem;
  background-color: transparent;
  color: $primary-blue;
  cursor: pointer;

  &:visited {
    border: none !important;
  }

  &.skewOnHover {
    color: $secondary-blue;
  }

  & > svg {
    vertical-align: middle;
  }

  &:focus {
    outline: 2px solid $primary-blue;
    // box-shadow: 0 0 0 2px $primary-blue;
  }

  &::before {
    content: ""; display: block;
    display: block;
    width: 100%; height: 100%;
    top: -2px; left: -2px;
    transition-property: border, background-color, transform;
    transition-duration: $transition-duration;
    transition-timing-function: ease-out;
    position: absolute;
    z-index: -1;

    // regular (cyan background, blue text)
    background-color: $secondary-blue;
    border: 2px solid $secondary-blue;
    transform: skew(-22.5deg);
  }

  &.skewOnHover {
    &::before {
      background-color: transparent;
      transform: skew(22.5deg);
    }
  }

---

将轮廓应用于倾斜图元：

&:focus:before {
 outline: 2px solid red;
}

并重置按钮的轮廓：

.button:focus {
  outline: none;
}

。按钮{
字号：900；
过渡：颜色0.3s缓变；
-webkit外观：无；
-moz外观：无；
显示：内联块；
文本对齐：居中；
最大宽度：320px；
最小宽度：200px；
高度：40px；
线高：40px；
位置：相对位置；
边界：没有！重要；
字体大小：1.4rem；
z指数：0；
填充：0.1.8rem；
背景色：透明；
颜色：蓝色；
光标：指针；
}
.按钮：已访问{
边界：没有！重要；
}
.button.skewOnHover{
颜色：淡蓝色；
}
.button>svg{
垂直对齐：中间对齐；
}
.按钮：焦点{
大纲：无；
}
.按钮：焦点：前{
外形：2倍纯红；
}
.按钮：：之前{
内容：“；
显示：块；
显示：块；
宽度：100%；
身高：100%；
顶部：-2px；
左：-2px；
过渡属性：边框、背景色、变换；
过渡时间：0.3s；
过渡定时功能：缓解；
位置：绝对位置；
z指数：-1；
背景色：淡蓝色；
边框：2个实心道奇蓝；
变换：倾斜（-22.5度）；
}
.button.skewOnHover:：before{
背景色：透明；
变换：倾斜（22.5度）；
}

---

按钮

确实有效。我必须承认，由于缺乏以下知识，我感到有点尴尬：before实际上可以用于聚焦。多谢各位