CSS邊框過渡上：前：怪異的效果

後，我創建了以下筆：基於此筆最初的http://codepen.io/crashy/pen/zvKEPb 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; 
    } 
}

來源

2015-09-24 Otis Wright

當2垂直的CSS邊界相撞，它們形成一個45度三角形。它是css三角形技術的基礎（http://jonrohan.codes/fieldnotes/creating-triangles-in-css/）。這可能是你正在經歷的。簡短的解釋：http://uaweb.arizona.edu/tips/creating-triangles-using-css – chiliNUT

你有border-width到10px，這意味着你已經設置各方10px，使得對20px寬度和高度的盒子。嘗試設置從這裏取出速記的border-width：

border: 10px solid transparent;

，而是設置border-width分別爲::before和::after：

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

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

測試爲我工作：http://codepen.io/pageaffairs/pen/KdgXEG

來源

2015-09-24 05:27:26

你先生搖滾！ –

CSS邊框過渡上：前：怪異的效果

回答

相關問題