-2

人気のある CSS 三角形が境界線だけを使用してどのように作られているのか知りたいです。コードの例を次に示します。

#CLASS or ID name  #CLASS or ID name:after {
  border-color: transparent transparent #F3F3F3;
  border-style: solid; 
  border-width: 6px;  
  bottom: 0;  
  content: ""; 
  height: 0;
  left: 50%; 
  margin-bottom: -1px;
  margin-left: -6px; 
  margin-top: 0;
  position: absolute;
  width: 0;
}

繰り返しますが、これがどのようにして上向きの矢印を作成するのでしょうか? さらに、私は何ができるのか混乱してcontent: ""います。

4

2 に答える 2

8

user1637741、あなたは非常に良い質問をします。

まず、の目的を説明することから始めましょうcontent:"";。ご覧のとおり、ここで使用しているのは疑似要素と呼ばれるものです。これらはcontent、単語や画像のように、ページに追加することを目的としています。三角形（または矢印）の状況は、実際にはページに新しいコンテンツを追加したくないという点で、一種のハックです。代わりに、要素の境界線を描画したいだけです（そう、最終的には三角形になります）。ただし、疑似要素contentは、含まれるものを指定するだけではありません。また、要素を表示するかどうかを決定するブール値としても機能します。つまり、コンテンツがない場合はレンダリングされません。幸いなことに、空の文字列を渡すだけで表示されます。

さて、さて、その厄介な境界について。いったいどうやって三角形を作るのでしょうか？つまり、要素の1つのエッジに境界線を描画し、三角形のように見えるものだけが表示されるように要素を配置します。

ここでお見せしましょう。このJSFiddleをチェックしてください。これは異常なことではありません。下の境界線のみを表示しているのは単なるdivです。しかし、あなたがそれを凝視してそれについて考えるならば、残っているものが三角形になるようにその境界のほとんどを隠すことを想像してください。エッジの1つを除いてすべてを削除すると、三角形がほとんど残りません。見えますか？

于 2012-10-11T05:08:49.830 に答える
1

まず、例を少し整理して、質問に関係のない css を取り除きましょう。

.my-div:after {
    content: ""; 
    border-style: solid; 
    border-width: 6px;  
    border-color: transparent transparent #F3F3F3;
}

これが何をしているのか：

  • content: ""の直後にコンテンツを挿入します.my-div。この場合は空の文字列であるため、基本的にコンテンツのないテキスト ノードがあり、したがって幅は 0px です。

  • 次に、border-style: solid;そのborder-width: 6px空のコンテンツを 6px 幅の境界線で囲みます。コンテンツには幅がないため、基本的に、デフォルトのテキストの色が何であれ、ソリッド ボックスが表示されます。

  • 最後にborder-color: transparent transparent #F3F3F3;、4 辺それぞれの境界線の色をリセットします。1transparentつ目は上部の境界線をクリアに設定し、2 つ目は左右の境界線もクリアに設定し、#F3F3F3 は下部の境界線をオフホワイト色に設定します。これで、すべてがボーダーであるボックスができました。上と横のボーダーは非表示になり、下のボーダーだけが残ります。しかし、それは下部の 6 ピクセルの太い線ではなく、各辺が結合することによって形成される 45 度の角度 (額縁のマイターを考えてください) のため、この場合は矢印になります。上向き。

元の例の残りのルールは、単なる配置ルールでした。

于 2012-10-11T05:17:19.890 に答える