矢印付きの CSS 実装 tab_html/css_WEB-ITnose

最近、Web プロジェクトで作業しているときに、クリックして切り替えることができる矢印付きのタブを実装する必要があるという問題が発生しました。最初はあまり深く考えず、上向き矢印の小さな絵を切り取って、外側のdivに同じ色の境界線を設定し、相対配置と絶対配置を使用しました。この方法は実現可能ですが、携帯電話とコンピューターの画面に表示される画質や詳細が異なるため、実際には 1 ピクセルの境界線は 1 ピクセルでカットされた画像よりもはるかに太くなり、強迫性障害を持つ人々にとって常に不快なものになります。 . ...そこで、CSS を使って大きな矢印を書こうと思いました。でも、これまで書いたことがないので、勉強してみましょう。これに関する情報はインターネット上にたくさんありますが、繰り返しますが、それは他人のものであり、自分のものであると主張したい場合は、自分でブログを書いてください。

この種の純粋な CSS には互換性の問題がなく、画像を切り取る必要もなく、CSS3 も使用しません。さまざまなブラウザーを適切にサポートしています。

基本原則: ボックスモデルの幅と高さ、境界線の表示と非表示を制御し、特定の辺の色を変更します。

台形から始めます:

要素の幅、高さ、境界線の幅が等しい場合、片側の色を変更して台形を表示します

rree

三角形:

いつ要素 幅と高さがゼロで、その他の辺が透明な場合、三角形を形成できます。

<span class="ladder"></span><style type="text/css">.ladder{    border:10px solid transparent;    border-left:10px #f00 solid;    width:10px;    height:10px;    display: inline-block;}</style>

三角形の線は、異なる色の 2 つの要素で覆うことで形成できます。

向上的三角形：<span class="triangle-up"></span> 向下的三角形：<span class="triangle-down"></span>  向左的三角形：<span class="triangle-left"></span>   向右的三角形：<span class="triangle-right"></span><style type="text/css">.triangle-up{    border: 20px solid transparent;    border-bottom: 20px solid #f00;    width:0;    height:0;}.triangle-down{    border: 20px solid transparent;    border-top: 20px solid #f00;    width:0;    height:0;}.triangle-left{    border:20px solid transparent;    border-right:20px solid #f00;    width:0;    height:0;}.triangle-right{    border:20px solid transparent;    border-left:20px solid #f00;    width:0;    height:0;}</style>

それから、矢印付きのプロンプトボックスは簡単です。外側のレイヤーに境界線を追加し、相対位置と絶対位置を使用するだけです。私のニーズを達成するには、それを js と組み合わせるだけです。

ここでは、誰もが学べるように、学習プロセス中に参照した記事にマークを付けます。

純粋な CSS で実現された矢印

純粋な CSS は、ストローク、影、および互換性のある丸い角を備えた三角形の矢印を実現します。あらゆる種類の矢印ブラウザバブルレイヤー