シェブロンを中心としたCSSサークルトランジション

Question

再生ボタンは、hereと同じようにしたいです。しかし、私はそれがシェブロンの権利であることを望んでいます国境からの再生ボタンよりもむしろ。しかし、これらの両方は私が完全に理解していない:beforeと:afterを使用します。

誰かがそれらの疑似セレクタが何であるかを私に説明して、右のダイレクトインを教えてもらえますか？私はその例をthis chevron codepenと組み合わせようとしています。

すべてが言われていたら、私はこのようにしたいと思います。私はちょうど最初の例から素晴らしいtrasitionを得ることは本当にクールだと思った。

Answer 1

Chevronsのリクエストに基づいて、これが私が思いついたものです。ボーダーの重さや位置などの詳細を再調整する必要があるかもしれません。

.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'の間に違いはありません。

実際に他の要素と実際に違う唯一の方法は、 '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; 
} 

他の選択肢は次のようになります。「>」にコンテンツを設定する

• 、代わりにバックグラウンドで画像ソリューション。
• ：after要素を三角形にスタイリングするには、背景画像の代わりにcss trickを使用します。

遷移は別の問題です。もしそれらの人に助けが必要なら私に知らせてください。