ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3を使った矢印の書き方

CSS3を使った矢印の書き方

藏色散人
藏色散人オリジナル
2021-01-04 10:17:373931ブラウズ

CSS3 で矢印を記述する方法: まず、フロントエンド サンプル ファイルを作成します。次に、CSS3 のtransform プロパティを使用して、背景のない小さな正方形を実装します。最後に、そのプロパティを設定することで矢印の効果を実現できます。ボーダーと反転。

CSS3を使った矢印の書き方

このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。

お勧め: "css ビデオ チュートリアル "

CSS3 で矢印を書くには?

CSS3 のtransform 属性を使用すると、最初に背景のない小さな正方形を実装し、その境界線を設定し、それを反転して矢印を実現できます。

以下の例を見てみましょう:

<style>
        .left{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-135deg);
            
        }
        .right{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(45deg);
        }
        .top{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-45deg);
        }
        .bottom{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <hr>
    <div class="right"></div>
    <hr>
    <div class="top"></div>
    <hr>
    <div class="bottom"></div>
</body>

レンダリング:

CSS3を使った矢印の書き方

以上がCSS3を使った矢印の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。