CSS で中空山形矢印を作成するには?

Linda Hamilton
リリース: 2024-10-30 08:02:03
オリジナル
589 人が閲覧しました

How to Create a Hollow Chevron Arrow with CSS?

CSS を使用したシェブロン矢印の作成

質問

コード スニペットに示すように、CSS を使用すると、塗りつぶされた三角形を簡単に作成できます。以下:

<code class="css">#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}</code>
ログイン後にコピー

しかし、下の画像に示されているように、中空の矢印のような三角形を作成するにはどうすればよいでしょうか?

[山形矢印の画像]

答え

CSS の before または after 疑似要素を使用して、このタイプの矢印を作成できます。プロセスの内訳は次のとおりです。

  • 目的の要素に前または後の疑似要素を追加します。
  • CSS スタイルを適用して、疑似要素の外観と位置をカスタマイズします。

たとえば、次の CSS を使用できます:

<code class="css">::before {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>
ログイン後にコピー

この CSS は、45 度回転された黒い輪郭を持つ中空の三角形を作成します。幅、高さ、境界線のプロパティを調整して外観をカスタマイズできます。

あるいは、疑似要素を使用せずにこの効果を実現することもできます。

  • 新しい < を作成します。スパン>または
    ;
  • CSS を使用して、サイズ、色、回転など、要素を矢印としてスタイル設定します。
  • 次に例を示します:

    <code class="css">.chevron {
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-top: 1px solid black;
        border-right: 1px solid black;
        transform: rotate(45deg);
        margin-right: 0.5em;
    }</code>
    ログイン後にコピー

    この場合、.chevron クラスを目的の要素に追加して矢印効果を作成できます。

以上がCSS で中空山形矢印を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!