[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS

画像を一切使用せずに、さまざまな形状をつくるスタイルシートを紹介します。

Neo Sample

[ad#ad-2]

各デモはマウスホバーで、その形状をつくるコードが表示されます。

Eample 1

ただ、残念なことにコードに記述がミスがあるため、スタイルシートの部分のみ使用するか、「Download」から一式をダウンロードして利用することをお勧めします。

Example 1のコードは下記のようになります。

HTML

<span class="neo1">&nbsp;</span>

CSS

.neo1{
	width:0;
	height:0;
	float:left;
	border-style:solid;
	border-color:transparent #555;
	border-width:32px 0 0 32px;
}

[ad#ad-2]

以下に、全226種の中からいくつか紹介します。

三角・アロー、白抜きのアローも

アローの変形版

半円状のハンドル・吹き出し

パックマン・パイチャート・時計・パワースイッチ

鉛筆・メール・スマートフォン

カメラ・虫メガネ

ホームアイコンもさまざまなパターンが

棒グラフ・折れ線グラフ