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

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

サイトのキャプチャ

Neo Sample

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

サイトのキャプチャ

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;
}

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

サイトのキャプチャ

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

サイトのキャプチャ

アローの変形版

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

カメラ・虫メガネ

サイトのキャプチャ

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

サイトのキャプチャ

棒グラフ・折れ線グラフ

top of page

©2017 coliss