ホームページ > 記事 > ウェブフロントエンド > CSS3を使った矢印の書き方
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 サイトの他の関連記事を参照してください。