Web筋トレも使っているサーバー!ロリポップを使ってみない?

CSS3でシンプルな矢印アイコン29個

Sponser Link

cssでここまで出来るといちいち画像作る必要ないですね。

Sponser Link

ダウンロード

CSSで作るシンプルな矢印アイコン29個

Sponser Link

使用方法

共通HTML

<a href="#" class="arrow">共通のHTML</a>

共通CSS

.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before, .arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

ここまで書いてから、それぞれの矢印のHTML&CSSを
追加して書いて行きます。

.arrow

.arrow で矢印位置をabsoluteで指定するので、

基準となるposition:relativeが書かれています。

また、padding:0 0 0 16px で 矢印を入れるスペースを作っています。

.arrow::before,.arrow::after

矢印位置をテキストの前(左)に指定しています。

beforeとafterを組み合わせて矢印を作るので、

2つとも同じ位置に重なっています。

矢印のHTML&CSS

See the Pen
MWwZEwv
by studio-0 (@studio-0)
on CodePen.

sample5-8の矢印を作ってみました。

HTMLにsample5-8クラスを追加し、

CSSにsample5-8のcssを追加します。

HTML

<a href="#" class="arrow sample5-8">
くの字の矢印アイコン(四角枠)
</a>

CSS

.sample5-8::before{
box-sizing: border-box;
width: 12px;
height: 12px;
border: 1px solid #7a0;
}
.sample5-8::after{
left: 3px;
width: 3px;
height: 3px;
border-top: 1px solid #7a0;
border-right: 1px solid #7a0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

CSSの解説

beforeで外枠の四角を作っています。

afterでくの字の矢印を作っています。

3pxの四角を作って上と右にボーダーを作り、

45度傾けて『>』の字を作っています。

 

他の矢印を作るときにも、

HTMLに矢印のクラスを追加し、

そのCSSを追加する方法で画像を作らずに

簡単に矢印を表示することができますよ。

See the Pen
WNvYVgr
by studio-0 (@studio-0)
on CodePen.

大きさと色を変えてみました。

こんな風にアレンジ可能です!

 

 

 

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。