ホームページ > 記事 > ウェブフロントエンド > CSS3を使った矢印の書き方
CSS3を使った矢印の書き方
- 藏色散人オリジナル
- 2021-01-04 10:17:373915ブラウズ
CSS3 で矢印を記述する方法: まず、フロントエンド サンプル ファイルを作成します。次に、CSS3 のtransform プロパティを使用して、背景のない小さな正方形を実装します。最後に、そのプロパティを設定することで矢印の効果を実現できます。ボーダーと反転。
このチュートリアルの動作環境: 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を使った矢印の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで画像の間隔を設定する方法次の記事：CSSで画像の間隔を設定する方法