BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSSでシェブロンアローを作るには？

2022-11-12 23:19:23

質問

さて、これで三角形を作ることは誰でも知っていますね。 

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

そして、これはソリッドで塗りつぶされた三角形を作り出します。しかし、このように中空タイプの矢印のような三角形はどのように作るのでしょうか？

どのように解決するのですか？

を使用することができます。 before または after という擬似要素を作り、そこにCSSを適用します。いろいろな方法があります。両方の before と after というように、それぞれを回転させ、バーの1つを形成するように配置します。より簡単な方法は、2つのボーダーを before 要素に2本のボーダーを追加し、それを transform: rotate .

pseuso 要素の代わりに実際の要素を使用する別の解決策については、下にスクロールしてください。

この場合、矢印をリスト内の箇条書きのように追加して em サイズを使用して、リストのフォントに合わせて適切なサイズになるようにしています。 

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

もちろん before または after のように、通常の要素にも同じように適用することができます。上のリストでは、追加のマークアップが必要ないので便利です。しかし、時にはマークアップが必要な場合があります。その場合は div または span を再利用している人さえ見かけます。 i 要素を「アイコン」のために再利用しているのを見たことがあります。つまり、以下のようなマークアップが可能です。使用する <i> を使うことが正しいかどうかは議論の余地がありますが、念のためspanも使っておくといいでしょう。 

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}

And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.

より多くのインスピレーションを求めるなら、この素晴らしい純粋なライブラリーをチェックしてください。 CSS アイコンのライブラリです。 . :)

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します