CSS边框过渡在:before和:after上有奇怪的效果

Question

我创建了以下笔:http://codepen.io/crashy/pen/zvKEPb

基于此笔最初:http://codepen.io/giana/pen/yYBpVY

不，我已经大规模地扩大了边界来显示错误。

基本上在按钮的两条水平线上，当边框过渡发生时，有一个奇怪的三角形形状随着过渡运行。

我不知道是什么导致了这一点，但它似乎并没有发生在原来，有什么想法吗?

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

Answer 1

您有border-width到10px，这意味着您已将所有边设置为10px，使20px的宽度和高度的盒子。试着从这里删除border-width:

border: 10px solid transparent;

并将::before和::after分别设置为border-width:

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

在测试中为我工作过:http://codepen.io/pageaffairs/pen/KdgXEG