画像を使わずにCSSだけで作る簡単なアイコン（丸、三角、四角）

公開日：2014/11/07

CSS アイコン

ホームページを制作する際にアイコンを使用して構築することは多くあると思います。
簡単なアイコンであれば画像を使わなくてもCSSだけでも作成することができます。

画像をあまり使いたくない場合などに良いかもしれないです。

今回は、丸、三角、四角などの簡単なアイコンを画像を使わずにCSSだけで作る方法をご紹介します。

CSSで簡単なアイコンの作成

それぞれのCSSの記述例を記載します。

丸のアイコン

css_icon_circle

.circle {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #67A6EB;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-o-border-radius: 50px;
	-ms-border-radius: 50px; 
	border-radius: 50px;
}

.circle {

display: inline-block;

width: 50px;

height: 50px;

background: #67A6EB;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

-o-border-radius: 50px;

-ms-border-radius: 50px;

border-radius: 50px;

}

三角のアイコン

css_icon_triangle

.triangle {
	position: absolute;
	border-bottom: 50px solid #67A6EB;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 0;
}

.triangle {

position: absolute;

border-bottom: 50px solid #67A6EB;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

height: 0;

width: 0;

}

四角のアイコン

css_icon_square

.square {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #67A6EB;
}

.square {

display: inline-block;

width: 50px;

height: 50px;

background: #67A6EB;

}

サンプル

他にも擬似要素を使用したりなどして色々なアイコンが作成できます。

「CSSだけで作る簡単なアイコン」のデモページ

まとめ

簡単なアイコンであれば、画像を用意する手間がなくなるのでCSSで作成した方が早いかもしれないです。また、複雑なアイコンをCSSで作成することも可能ですが、制作に時間がかかってしまう場合があります。

そのような場合はWEBフォントのアイコンを使用した方がおしゃれなデザインを作成することができると思います。

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！

お気軽にご相談ください。
022-716-3883
営業時間　平日9:30～18:00

<< 前の記事

キャッチコピーで激変！アクセスに繋がる5原則

次の記事 >>

隠したい！超簡単Photoshopでモザイク加工をする方法

仙台のホームページ制作･システム開発･ウェブコンサルティングはアド･エータイプへ。

画像を使わずにCSSだけで作る簡単なアイコン（丸、三角、四角）

CSSで簡単なアイコンの作成

丸のアイコン

三角のアイコン

四角のアイコン

サンプル

まとめ

関連記事

Category

最近の投稿

人気の投稿