與雪佛龍在中間的CSS圈過渡

Question

我想獲得一個播放按鈕，就像發現的那個here。但是，除了邊界外的播放按鈕，我希望它是一個正方形。然而，這兩個使用:before和:after，我不完全明白。

有人可以向我解釋這些僞選擇器是什麼，並指出我在右邊directoin？我試圖結合該示例與this chevron codepen

當所有的說法和完成後，我希望它看起來像這樣。我只是覺得從第一個例子中獲得那麼好的傳奇會非常酷。

Answer 1

根據雪佛龍的要求，這是我想出的。您可能需要重新調整邊界重量和位置等細節。

.chevron { 
 
    display: inline-block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    border: 0.25em solid #333; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 

 
.chevron::after { 
 
\t border-style: solid; 
 
\t border-width: 0.25em 0.25em 0 0; 
 
\t content: ''; 
 
\t display: inline-block; 
 
\t height: 0.45em; 
 
\t /*left: 0.15em;*/ 
 
\t position: relative; 
 
\t top: 0.15em; 
 
\t transform: rotate(-45deg); 
 
\t vertical-align: middle; 
 
\t width: 0.45em; 
 
} 
 

 
.chevron.right:after { 
 
\t left: 0; 
 
\t transform: rotate(45deg); 
 
} 
 

 
.chevron.bottom:after { 
 
\t top: 0; 
 
\t transform: rotate(135deg); 
 
} 
 

 
.chevron.left:after { 
 
\t left: 0.25em; 
 
\t transform: rotate(-135deg); 
 
}

<p>Chevron (top) <span class="chevron top"></span> 
 
<p>Chevron (right) <span class="chevron right"></span> 
 
<p>Chevron (bottom) <span class="chevron bottom"></span> 
 
<p>Chevron (left) <span class="chevron left"></span>

Answer 2

其他人可能能夠更好地解釋它，但我認爲它的方式有點像從CSS內部生成html元素。

以下內容的某些內容：「對於」___「的每個元素，在開始處（：before）或結束處（after）添加一個無名稱的子元素，並按照以下方式對其進行設置。」。此時可能值得注意的是，除了它們出現的順序以外，'：before'和'after'之間沒有區別。

在實際意義上，它與其他元素真正區別的唯一方法是需要指定'content'屬性（即使它只是一個空''）。

所以舉例來說，如果你有雪佛龍爲.png圖像：

.circle{ 
    position: relative; 
    height: 100px; 
    width: 100px; 
    border-radius: 100px; 
    border: 2px solid #fff; 
} 
.circle::after{ 
    content:''; 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    margin: auto; 
    height: 50px; 
    width: 50px; 
    background-image: url('../path/chevron.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

其他替代方案是：

• 內容設置爲「>」，而不是背景 - 圖像解決方案
• 使用此css trick代替背景圖像解決方案，將元素設置爲三角形。

轉換是一個單獨的問題。如果您需要幫助，請告訴我。