CSS を使用して中空線のあるシェブロン矢印を作成する方法-CSSチュートリアル-php.cn

CSS を使用して中空線のあるシェブロン矢印を作成する方法

Mary-Kate Olsen

リリース： 2024-11-03 15:47:03

オリジナル

870 人が閲覧しました

How to Create a Chevron Arrow with Hollow Lines Using CSS?

CSS を使用して中空線のあるシェブロン矢印を作成する方法

CSS を使用して中実の三角形を作成する手法は広く知られていますが、どうすれば中空の矢印を実現できますか?

1 つのアプローチには、疑似要素 (::before または ::after) を使用し、特定の CSS スタイルを適用することが含まれます。たとえば、矢印の各バーを表す ::before 要素と ::after 要素の両方を追加し、transform:rotate を使用してそれらを正しく配置できます。

あるいは、より簡単な解決策は次のとおりです。

擬似要素で境界線を使用する

::before 要素に境界線を追加し、transform:rotate:

<code class="css">li::before {
    position: relative;
    content: "";
    display: inline-block;
    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;
}</code>

ログイン後にコピー

実際の要素を使用した代替解決策を使用して回転させます

疑似要素を使用する代わりに、リストを作成し、CSS でスタイルを設定できます:

<code class="css">ul {
    list-style: none;
}

li::before {
    content: ">"; /* Replace with any desired arrow character */
    font-size: 1.5em; /* Adjust font size as needed */
}</code>

ログイン後にコピー

以上がCSS を使用して中空線のあるシェブロン矢印を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。