CSS边界在：before和：after怪异效果上过渡

Question

I have created the following pen: http://codepen.io/crashy/pen/zvKEPb

Based of this pen originally: http://codepen.io/giana/pen/yYBpVY

No I have massively widened the borders to demonstrate the error.

Basically on the two horizontal lines of the button when the border transition is happening there is a weird triangle type shape running along with the transition.

I have no idea what is causing this but it does not appear to be happening in the original, any ideas?

SASS as follows:

$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

You have the border-width to 10px , which means that you've set all sides to 10px , making for a box of 20px width and height. Try setting removing the shorthand border-width from here:

border: 10px solid transparent;

and instead set border-width separately for ::before and ::after :

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

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

Worked for me in testing: http://codepen.io/pageaffairs/pen/KdgXEG