このCSSスニペットはどのように矢印を描いていますか？

このコードはtutorialに続いていますが、このコードは矢印を描くと主張されていますが、決して適切に説明されていません。このCSSスニペットはどのように矢印を描いていますか？

.tooltip:hover:before{ 
 
    border: solid; 
 
    border-color: #333 transparent; 
 
    border-width: 6px 6px 0 6px; 
 
    bottom: 20px; 
 
    content: ""; 
 
    left: 50%; 
 
    position: absolute; 
 
    z-index: 99; 
 
}

<div class="tooltip">Sample text</div>

誰もが、それはそれをやっている方法を説明していただけますか？

出典

2017-01-14 Holmes.Sherlock

あなただけのことは技術的にかかわらず、どのように動作するか確認してください。..ボーダーの4辺のうち3を供給していない原因。 – putvande

google "css arrow" ...最初に現れるのは... https://css-tricks.com/snippets/css/css-triangle/ – Daniel

@putvande下記の私の答えをチェックしてください。 –

トリックは境界の色と幅です。高さと幅がゼロの矩形枠を想像してください。その枠線は正確な中心に出ています。境界線を一つの色（この場合＃333）で描画し、残りの部分を透明なままにすると、矢印が表示されます。

技術はCSSのトリックでさらに説明される：https://css-tricks.com/snippets/css/css-triangle/#article-header-id-2

出典

2017-01-14 18:46:48

私はリンクから技術を得ました。どうもありがとう！しかしなぜ 'before'と' after'疑似要素を使う必要があったのですか？ –

@ Holmes.Sherlockこれは、内部に罫線を描画する擬似要素を作成するためです。これは、要素の隣にdiv/spanを置き、それを使って境界線を描画するのと同じです。唯一の違いは、このメソッドがDOMを整理している点です。 –

このCSSスニペットはどのように矢印を描いていますか？

答えて

関連する問題