Html CSS边框在：之前和：之后的过渡效果

我创建了以下钢笔：

根据这支笔的原稿：

不，我已经大规模地扩大了边界以证明错误

基本上，当边界过渡发生时，按钮的两条水平线上有一个奇怪的三角形形状与过渡一起运行

我不知道这是什么原因，但它似乎没有发生在原来的，任何想法

SASS如下：

$theme-primary-alpha: #27ae60;
$theme-primary-beta: #2ecc71;

$theme-secondary-alpha: #8e44ad;
$theme-secondary-beta: #9b59b6;

$theme-highlight-alpha: #bdc3c7;
$theme-highlight-beta: #ecf0f1;

$theme-lowlight-alpha: #2c3e50;
$theme-lowlight-beta: #34495e;

$border-width: 10px;

.btn { // Stripped out BS button
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
}

.btn-theme {
  @extend .btn;
  // Exagerate:
  font-size: 30px;
  padding: 20px 30px;
  // Effect styles
  border: 0;
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
  vertical-align: middle;
  &::before,
  &::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.btn-theme-primary, .btn-theme-secondary {
  color: $theme-highlight-alpha;
  box-shadow: inset 0 0 0 $border-width $theme-highlight-alpha;
  transition: color 1000ms ease;
  &::before,
  &::after {
    border: $border-width solid transparent;
    width: 0;
    height: 0;
  }
  &::before {
    top: 0;
    left: 0;
  }
  &::after {
    bottom: 0;
    right: 0;
  }
  &:hover::before,
  &:hover::after,
  &:active::before,
  &:active::after,
  &:focus::before,
  &:focus::after {
    width: 100%;
    height: 100%;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    transition: width 0.25s ease-out,
    height 0.25s ease-out 0.25s;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    transition: border-color 0s ease-out 0.5s,
    width 0.25s ease-out 0.5s,
    height 0.25s ease-out 0.75s;
  }
}

.btn-theme-primary {
  &:hover,
  &:active,
  &:focus {
    color: $theme-primary-alpha;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    border-top-color: $theme-primary-alpha;
    border-right-color: $theme-primary-alpha;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    border-bottom-color: $theme-primary-alpha;
    border-left-color: $theme-primary-alpha;
  }
}

.btn-theme-secondary {
  &:hover,
  &:active,
  &:focus {
    color: $theme-secondary-alpha;
  }
  &:hover::before,
  &:active::before,
  &:focus::before {
    border-top-color: $theme-secondary-alpha;
    border-right-color: $theme-secondary-alpha;
  }
  &:hover::after,
  &:active::after,
  &:focus::after {
    border-bottom-color: $theme-secondary-alpha;
    border-left-color: $theme-secondary-alpha;
  }
}

---

您将

边框宽度设置为
10px
，这意味着您已将所有边设置为
10px
，从而形成一个宽度和高度为
20px的框。尝试从此处删除速记边框宽度：

border: 10px solid transparent;

而是分别为
：在
之前和
：：在
之后设置
边框宽度：

::before {
  border-width: 10px 10px 0 0;
}

::after {
  border-width: 0 0 10px 10px;
}

在测试中为我工作：
您将
边框宽度设置为
10px
，这意味着您已将所有边都设置为
10px
，形成了一个宽度和高度为
20px
的框。尝试从此处删除速记边框宽度：

border: 10px solid transparent;

而是分别为
：在
之前和
：：在
之后设置
边框宽度：

::before {
  border-width: 10px 10px 0 0;
}

::after {
  border-width: 0 0 10px 10px;
}

在测试中为我工作：
当两个垂直css边界碰撞时，它们形成45度三角形。它是css三角形技术（）的基础。这可能就是你正在经历的。简短说明：当两个垂直css边框碰撞时，它们形成45度三角形。它是css三角形技术（）的基础。这可能就是你正在经历的。简要说明：