1

Facebookで、いいねがたくさんあるものにカーソルを合わせると、投稿が好きな人全員にdivがポップアップ表示されます。誰かがcssのdivを模倣して、それをどのように行うことができるかを説明できるかどうか疑問に思っていました。私が何を意味するかを示す下の写真があります。私はあなたがcssで：afterを使わなければならないことを知っていますが、三角形とそのすべてを配置する方法がわかりません。

TrinagleのブラックDiv

これが私がどこかで見つけたいくつかのコードです：

#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}

#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
4

1 に答える 1

3

そこに貼り付けたコードには、その要点があります。ここで、機能しているJSFiddleを確認できます。これにより、目的のようになります。

この問題には2つの部分があると思います。最初の部分は三角形を作ることです。2番目の部分は、三角形の配置です。

三角形を作る

疑似要素の境界線は、私たちが見ているその三角形の原因です。それがどのように起こっているのかわからない場合は、それを非常によく説明しているこの素晴らしい答えを見てください。

三角形の配置

ポジショニングの鍵は、子を親の外に表示させることです。absoluteこれは、子にポジショニングを設定することで実行できます。ただし、親をまったく変更せずにこれを行うabsoluteと、ウィンドウに対して相対的な位置が設定されます。

ここで必要なのは、親に対して子を配置することです。staticこれを行うには、親要素の位置をデフォルト値である。以外に設定します。貼り付けたコードで、彼らがそれをに設定していることがわかりますrelative。ポジショニングの詳細については、作業ドキュメントはかなり説明的だと思います。もう1つの優れたリソースは、CSSTricksにあります。

とにかく、私たちは子供が親のすぐ外にいることを望んでいます。したがって、高さ5ピクセルの三角形がある場合、配置用の子のCSSは次のようになります。

position: absolute;
top: -5px;

これにより、上記のJSFiddleでわかるように、上部に取り付けられているように見えます。

希望どおりに垂直にleft配置したら、水平に沿って目的の場所に配置するように設定します。

もちろん、ホイールを再発明する価値があるかどうかを自問する必要があります。ツールチップにはBootstrapJqueryが付属しています。

于 2013-03-02T17:25:46.400 に答える