buena suerte!


図形とかアイコンっぽいものを画像を使わずに CSS で描いてみた。

CSS を使って描かれたモノといえば Opera のアイコンや、ホーマー・シンプソンドラえもんなんかが有名ですが、今回はシンプルな図形、そしてシンボルアイコンっぽいものを、画像もテキストもなしで CSS だけで描いてみようという試み。

動作確認

Chrome 7.0.517.44, Safari 5.0.2, Firefox 3.6.12, Opera 10.63 で確認。 Firefox と Opera でうまく表示されないのがあります。

デモサイト / Demo Site

HTML

図形では1つ(立体は3つ)まで、アイコンでは4つまでの要素で描いてます。要素数の縛りがなければいくらでもいけそう。

<span class="squ"></span>
<div class="apple"><span></span></div>

デモでは無駄に擬似要素の ::before ::after を使ってるけど、下みたいに書いたほうがいいかも。ただ、要素の初期位置と順番が変わるので注意。というか順番とか全く意識しないで書いてた……

<div class="squ">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
</div>
<div class="apple">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
	<span class="el4"></span>
</div>

CSS

Mayer's CSS Reset でリセットしてます。
一つ一つ説明入れるの大変なので全部一度に貼っていきます。

図形 / Shapes

shapes

図形はきれいに並んでいるように見せるためにマージンとかで微調整してるのがあるので、修正が必要かと。

/* square / 正方形
-------------------------------------*/
.squ {
	width: 260px;
	height: 260px;
	background: #bbb;
}

/* rectangle / 長方形
-------------------------------------*/
.rec {
	width: 390px;
	height: 130px;
	background: #bbb;
}

/* diamond / 菱形
-------------------------------------*/
.dia {
	margin: 60px auto 30px;
	width: 260px;
	height: 260px;
	background: #bbb;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/* parallelogram / 平行四辺形
-------------------------------------*/
.par {
	width: 300px;
	height: 200px;
	background: #bbb;
	transform: skew(-30deg);
	-webkit-transform: skew(-30deg);
	-moz-transform: skew(-30deg);
}

/* triangle / 三角形
-------------------------------------*/
.tri {
	width: 0;
	height: 0;
	border-right: 130px solid transparent;
	border-left: 130px solid transparent;
	border-bottom: 225px solid #bbb;
}

/* right triangle / 直角三角形
-------------------------------------*/
.rig {
	width: 0;
	height: 0;
	border-right: 300px solid transparent;
	border-left: 0px solid transparent;
	border-bottom: 300px solid #bbb;
}

/* isosceles triangle / 二等辺三角形
-------------------------------------*/
.iso {
	width: 0;
	height: 0;
	border-right: 150px solid transparent;
	border-left: 150px solid transparent;
	border-bottom: 300px solid #bbb;
}

/* trapezoid / 台形
-------------------------------------*/
.tra {
	margin-top: -160px;
	width: 160px;
	height: 160px;
	border-right: 120px solid transparent;
	border-left: 120px solid transparent;
	border-bottom: 200px solid #bbb;
}

/* circle / 円
-------------------------------------*/
.cir {
	width: 300px;
	height: 300px;
	background: #bbb;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	-o-border-radius: 150px;
}

/* semicircle / 半円
-------------------------------------*/
.sem {
	width: 300px;
	height: 150px;
	background: #bbb;
	border-radius: 150px 150px 0 0;
	-webkit-border-radius: 150px 150px 0 0;
	-moz-border-radius: 150px 150px 0 0;
	-o-border-radius: 150px 150px 0 0;
}

/* oval / 楕円
-------------------------------------*/
.ova {
	width: 260px;
	height: 260px;
	background: #bbb;
	border-radius: 130px;
	-webkit-border-radius: 130px;
	-moz-border-radius: 130px;
	-o-border-radius: 130px;
	transform: rotate(-40deg) skew(25deg);
	-webkit-transform: rotate(-40deg) skew(25deg);
	-moz-transform: rotate(-40deg) skew(25deg);
	-o-transform: rotate(-40deg) skew(25deg);
}

/* sector / 扇型
-------------------------------------*/
.sec {
	margin-top: 60px;
	margin-bottom: -60px;
	width: 260px;
	height: 260px;
	background: #bbb;
	border-radius: 0 0 0 260px;
	-webkit-border-radius: 0 0 0 260px;
	-moz-border-radius: 0 0 0 260px;
	-o-border-radius: 0 0 0 260px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

/* donut / ドーナツ型
-------------------------------------*/
.don {
	width: 260px;
	height: 260px;
	background: transparent;
	border: 60px solid #bbb;
	border-radius: 260px;
	-webkit-border-radius: 260px;
	-moz-border-radius: 260px;
	-o-border-radius: 260px;
}

/* cube / 立方体
-------------------------------------*/
.cub {
	margin-bottom: 260px;
	width: 260px;
	height: 260px;
	background: #ccc;
	transform: rotate(-45deg) skew(15deg, 15deg);
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);
	-o-transform: rotate(-45deg) skew(15deg, 15deg);
}
.cub::before {
	left: -270px;
	top: 120px;
	display: block;
	content: "";
	position: relative;
	width: 280px;
	height: 280px;
	background: #bbb;
    transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -webkit-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -moz-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -o-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
}
.cub::after {
	top: -30px;
	left: -140px;
	display: block;
	content: "";
	position: relative;
	width: 280px;
	height: 280px;
	background: #aaa;
    transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -webkit-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -moz-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -o-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
}

/* cone / 円錐
-------------------------------------*/
.con {
	width: 0;
	height: 0;
	border-right: 150px solid transparent;
	border-left: 150px solid transparent;
	border-bottom: 300px solid #bbb;
}
.con::after {
	display: block;
	content: "";
	position: absolute;
	margin-top: 230px;
	margin-left: -68px;
	width: 136px;
	height: 136px;
	background: #bbb;
	border-radius: 120px;
	-webkit-border-radius: 120px;
	-moz-border-radius: 120px;
	-o-border-radius: 120px;
	transform: rotate(-25deg) skew(60deg);
	-webkit-transform: rotate(-25deg) skew(60deg);
	-moz-transform: rotate(-25deg) skew(60deg);
	-o-transform: rotate(-25deg) skew(60deg);
	z-index: -1;
}

/* cylinder / 円柱
-------------------------------------*/
.cyl {
	margin-top: 40px;
	width: 300px;
	height: 300px;
	background: #aaa;
}
.cyl::before {
	display: block;
	content: "";
	position: absolute;
	margin-top: -68px;
	margin-left: 82px;
	width: 136px;
	height: 136px;
	background: #bbb;
	border-radius: 120px;
	-webkit-border-radius: 120px;
	-moz-border-radius: 120px;
	-o-border-radius: 120px;
	transform: rotate(-25deg) skew(60deg);
	-webkit-transform: rotate(-25deg) skew(60deg);
	-moz-transform: rotate(-25deg) skew(60deg);
	-o-transform: rotate(-25deg) skew(60deg);
}
.cyl::after {
	display: block;
	content: "";
	position: absolute;
	margin-top: 230px;
	margin-left: 82px;
	width: 136px;
	height: 136px;
	background: #aaa;
	border-radius: 120px;
	-webkit-border-radius: 120px;
	-moz-border-radius: 120px;
	-o-border-radius: 120px;
	transform: rotate(-25deg) skew(60deg);
	-webkit-transform: rotate(-25deg) skew(60deg);
	-moz-transform: rotate(-25deg) skew(60deg);
	-o-transform: rotate(-25deg) skew(60deg);
	z-index: -1;
}

/* pyramid / 角錐
-------------------------------------*/
.pyr {
	margin-top: 30px;
	width: 0;
	height: 0;
	border-right: 150px solid transparent;
	border-bottom: 300px solid #bbb;
	transform: rotate(27deg);
	-webkit-transform: rotate(27deg);
	-moz-transform: rotate(27deg);
	-o-transform: rotate(27deg);
}
.pyr::after {
	display: block;
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-bottom: 300px solid #aaa;
	transform: rotate(-27deg) rotate(-26deg);
	-webkit-transform: rotate(-27deg) rotate(-26deg);
	-moz-transform: rotate(-27deg) rotate(-26deg);
	-o-transform: rotate(-27deg) rotate(-26deg);
}

/* prism / 角柱
-------------------------------------*/
.pri {
	margin-bottom: 260px;
	width: 160px;
	height: 160px;
	background: #ccc;
	transform: rotate(-45deg) skew(15deg, 15deg);
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);
	-o-transform: rotate(-45deg) skew(15deg, 15deg);
}
.pri::before {
	left: -216px;
	top: 70px;
	display: block;
	content: "";
	position: relative;
	width: 172px;
	height: 280px;
	background: #bbb;
    transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -webkit-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -moz-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
    -o-transform: skew(-15deg, -15deg) rotate(45deg) rotate(15deg) skew(15deg, 15deg);
}
.pri::after {
	top: -130px;
	left: -136px;
	display: block;
	content: "";
	position: relative;
	width: 172px;
	height: 280px;
	background: #aaa;
    transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -webkit-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -moz-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
    -o-transform: skew(-15deg, -15deg) rotate(45deg) rotate(-15deg) skew(-15deg, -15deg);
}

シンボルアイコン / Symbolic Icons

symbolic icons

アイコンって言うには大きすぎるわけで……作り易いように大きいのから作り始めたのはいいが、小さく調整するの面倒過ぎて投げた。せめて 64x64 位の大きさにしたかった。

2010/11/19追記: こんなの出来てた素晴らしい。
Pure CSS GUI icons (experimental) - Nicolas Gallagher - Blog & Ephemera

div {
	width: 260px;
	height: 260px;
	padding: 10px;
	box-shadow:
		1px 0 0 #666,
		0 1px 0 #666,
		-1px 0 0 #666,
		0 -1px 0 #666,
		0 0 10px rgba(0,0,0,0.3);
	-webkit-box-shadow:
		1px 0 0 #666,
		0 1px 0 #666,
		-1px 0 0 #666,
		0 -1px 0 #666,
		0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow:
		1px 0 0 #666,
		0 1px 0 #666,
		-1px 0 0 #666,
		0 -1px 0 #666,
		0 0 10px rgba(0,0,0,0.3);
	-o-box-shadow:
		1px 0 0 #666,
		0 1px 0 #666,
		-1px 0 0 #666,
		0 -1px 0 #666,
		0 0 10px rgba(0,0,0,0.3);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}

/* Apple
---------------------------------------------------*/
.apple {background: #fff;}
.apple::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 50px;
	margin-left: 20px;
	width: 150px;
	height: 200px;
	background: #aaa;
	border-radius: 150px / 150px 200px;
	-webkit-border-radius: 150px / 150px 200px;
	-moz-border-radius: 150px / 150px 200px;
	-o-border-radius: 150px / 150px 200px;
	transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
}
.apple::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 50px;
	margin-left: 90px;
	width: 150px;
	height: 200px;
	background: #aaa;
	border-radius: 150px / 200px 150px;
	-webkit-border-radius: 150px / 200px 150px;
	-moz-border-radius: 150px / 200px 150px;
	-o-border-radius: 150px / 200px 150px;
	transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
}
.apple span {}
.apple span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 5px;
	margin-left: 130px;
	width: 50px;
	height: 50px;
	background: #aaa;
	border-radius: 50px 0 50px 0;
	-webkit-border-radius: 50px 0 50px 0;
	-moz-border-radius: 50px 0 50px 0;
	-o-border-radius: 50px 0 50px 0;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
}
.apple span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 75px;
	margin-left: 195px;
	width: 50px;
	height: 100px;
	background: #fff;
	border-radius: 100px 0 0 100px;
	-webkit-border-radius: 100px 0 0 100px;
	-moz-border-radius: 100px 0 0 100px;
	z-index: 2;
}

/* Cloud
---------------------------------------------------*/
.cloud {background: #cce;}
.cloud::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 120px;
	margin-left: 30px;
	width: 200px;
	height: 80px;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom,
		from(#fff),
		color-stop(.4, #fff),
		to(#eee));
	background: -moz-linear-gradient(top,
		#fff,
		#fff 40%,
		#eee);
	background: linear-gradient(top,
		#fff,
		#fff 40%,
		#eee);
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}
.cloud::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 70px;
	margin-left: 100px;
	width: 100px;
	height: 60px;
	background: #fff;
	border-radius: 50px 50px 0 0;
	-webkit-border-radius: 50px 50px 0 0;
	-moz-border-radius: 50px 50px 0 0;
}
.cloud span {}
.cloud span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 100px;
	margin-left: 60px;
	width: 60px;
	height: 30px;
	background: #fff;
	border-radius: 30px 30px 0 0;
	-webkit-border-radius: 30px 30px 0 0;
	-moz-border-radius: 30px 30px 0 0;
}
.cloud span::after {}

/* Human
---------------------------------------------------*/
.human {background: #ecc;}
.human::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 20px;
	margin-left: 80px;
	width: 100px;
	height: 100px;
	background: #e99;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	z-index: 1;
}
.human::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 110px;
	margin-left: 70px;
	width: 120px;
	height: 120px;
	background: #e99;
	border-radius: 60px 60px 5px 5px;
	-webkit-border-radius: 60px 60px 5px 5px;
	-moz-border-radius: 60px 60px 5px 5px;
}

/* Restrict
---------------------------------------------------*/
.restrict {background: #ccb;}
.restrict::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 30px;
	width: 160px;
	height: 160px;
	border: 20px solid #f33;
	border-radius: 160px;
	-webkit-border-radius: 160px;
	-moz-border-radius: 160px;
}
.restrict::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 120px;
	width: 20px;
	height: 180px;
	background: #f33;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
.restrict span {}
.restrict span::before {}
.restrict span::after {}

/* Caution
---------------------------------------------------*/
.caution {background: #333;}
.caution::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 30px;
	width: 0;
	height: 0;
	border-right: 100px solid transparent;
	border-left: 100px solid transparent;
	border-bottom: 180px solid #000;
}
.caution::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 65px;
	margin-left: 50px;
	width: 0;
	height: 0;
	border-right: 80px solid transparent;
	border-left: 80px solid transparent;
	border-bottom: 145px solid #fc3;
}
.caution span {}
.caution span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 100px;
	margin-left: 120px;
	width: 20px;
	height: 70px;
	background: #000;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	z-index: 1;
}
.caution span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 180px;
	margin-left: 120px;
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	z-index: 1;
}

/* music
---------------------------------------------------*/
.music {
	background: #cac;
	background: -webkit-gradient(radial, center center, 0, center center, 260,
		from(#cac),
		color-stop(35%, #cac),
		color-stop(60%, #b8b),
		to(#b8b));
	background: -moz-radial-gradient(circle, #cac, #cac 50%, #a7a 90%, #a7a);
	background: radial-gradient(circle, #cac, #cac 50%, #a7a 90%, #a7a);
}
.music::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 70px;
	margin-left: 80px;
	width: 120px;
	height: 100px;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom,
		from(#222),
		color-stop(.3, #000),
		to(#000));
	background: -moz-linear-gradient(top,
		#222,
		#000 30%,
		#000);
	background: linear-gradient(top,
		#222,
		#000 30%,
		#000);
	transform: skew(-5deg, -5deg);
	-webkit-transform: skew(-5deg, -5deg);
	-moz-transform: skew(-5deg, -5deg);
	-o-transform: skew(-5deg, -5deg);
	box-shadow: 1px 1px 1px #fff;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-moz-box-shadow: 1px 1px 1px #fff;
	-o-box-shadow: 1px 1px 1px #fff;
}
.music::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 100px;
	margin-left: 88px;
	width: 100px;
	height: 80px;
	background: #cac;
	transform: skew(-5deg, -5deg);
	-webkit-transform: skew(-5deg, -5deg);
	-moz-transform: skew(-5deg, -5deg);
	-o-transform: skew(-5deg, -5deg);
	box-shadow: 1px 1px 1px #fff inset;
	-webkit-box-shadow: 1px 1px 1px #fff inset;
	-moz-box-shadow: 1px 1px 1px #fff inset;
	-o-box-shadow: 1px 1px 1px #fff inset;
	z-inde: 2;
}
.music span {}
.music span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 160px;
	margin-left: 45px;
	width: 40px;
	height: 40px;
	background: #000;
	background: -webkit-gradient(linear, left top, right bottom,
		from(#222),
		color-stop(.4, #000),
		to(#000));
	background: -moz-linear-gradient(left -45deg,
		#222,
		#000 40%,
		#000);
	background: linear-gradient(left -45deg,
		#222,
		#000 40%,
		#000);
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-o-border-radius: 40px;
	transform: skew(-10deg, -5deg);
	-webkit-transform: skew(-10deg, -5deg);
	-moz-transform: skew(-10deg, -5deg);
	-o-transform: skew(-10deg, -5deg);
	box-shadow: 1px 1px 1px #fff;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-moz-box-shadow: 1px 1px 1px #fff;
	-o-box-shadow: 1px 1px 1px #fff;
	z-index: 1;
}
.music span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 150px;
	margin-left: 155px;
	width: 40px;
	height: 40px;
	background: #000;
	background: -webkit-gradient(linear, left top, right bottom,
		from(#222),
		color-stop(.4, #000),
		to(#000));
	background: -moz-linear-gradient(left -45deg,
		#222,
		#000 40%,
		#000);
	background: linear-gradient(left -45deg,
		#222,
		#000 40%,
		#000);
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-o-border-radius: 40px;
	transform: skew(-10deg, -5deg);
	-webkit-transform: skew(-10deg, -5deg);
	-moz-transform: skew(-10deg, -5deg);
	-o-transform: skew(-10deg, -5deg);
	box-shadow: 1px 1px 1px #fff;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-moz-box-shadow: 1px 1px 1px #fff;
	-o-box-shadow: 1px 1px 1px #fff;
	z-index: 1;
}

/* Search
---------------------------------------------------*/
.search {background: #cba;}
.search::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 130px;
	margin-left: 45px;
	width: 50px;
	height: 120px;
	background: #000;
	border-radius: 0 0 30px 30px;
	-webkit-border-radius: 0 0 30px 30px;
	-moz-border-radius: 0 0 30px 30px;
	-o-border-radius: 0 0 30px 30px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.search::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 20px;
	margin-left: 80px;
	width: 160px;
	height: 160px;
	background: #333;
	border-radius: 160px;
	-webkit-border-radius: 160px;
	-moz-border-radius: 160px;
	-o-border-radius: 160px;
}
.search span {}
.search span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 100px;
	width: 120px;
	height: 120px;
	background: #fff;
	background: -webkit-gradient(linear, left top, right bottom,
		from(#fafafa),
		color-stop(.7, #fff),
		to(#fff));
	background: -moz-linear-gradient(left -45deg,
		#fafafa,
		#fff 70%,
		#fff);
	background: linear-gradient(left -45deg,
		#fafafa,
		#fff 70%,
		#fff);
	border-radius: 120px;
	-webkit-border-radius: 120px;
	-moz-border-radius: 120px;
	-o-border-radius: 120px;
	z-index: 1;
}
.search span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 50px;
	margin-left: 100px;
	width: 100px;
	height: 100px;
	border-right: 10px solid #333;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	z-index: 1;
}

/* Loading
---------------------------------------------------*/
.loading {background: #cfa;}
.loading::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 40px;
	width: 100px;
	height: 100px;
	border: 40px solid #67c;
	border-radius: 140px;
	-webkit-border-radius: 140px;
	-moz-border-radius: 140px;
	-o-border-radius: 140px;
}
.loading::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 20px;
	margin-left: 100px;
	width: 60px;
	height: 220px;
	background: #cfa;
	transform: rotate(-28deg);
	-webkit-transform: rotate(-28deg);
	-moz-transform: rotate(-28deg);
	-o-transform: rotate(-28deg);
}
.loading span {}
.loading span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 50px;
	margin-left: 20px;
	width: 0;
	height: 0;
	border-right: 40px solid transparent;
	border-left: 40px solid transparent;
	border-bottom: 70px solid #67c;
	z-index: 1;
}
.loading span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 140px;
	margin-left: 158px;
	width: 0;
	height: 0;
	border-right: 40px solid transparent;
	border-left: 40px solid transparent;
	border-top: 70px solid #67c;
	z-index: 1;
}

/* Thunder
---------------------------------------------------*/
.thunder {background: #999;}
.thunder::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 5px;
	margin-left: 95px;
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-bottom: 150px solid #fc3;
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	z-index: 1;
}
.thunder::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 105px;
	margin-left: 105px;
	width: 0;
	height: 0;
	border-right: 60px solid transparent;
	border-top: 150px solid #fc3;
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	z-index: 1;
}
.thunder span {}
.thunder span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 5px;
	margin-left: 95px;
	width: 0;
	height: 0;
	border-left: 61px solid transparent;
	border-bottom: 151px solid #333;
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
}
.thunder span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 105px;
	margin-left: 105px;
	width: 0;
	height: 0;
	border-right: 61px solid transparent;
	border-top: 151px solid #333;
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
}

/* Disc
---------------------------------------------------*/
.disc {background: #ffc;}
.disc::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 30px;
	width: 200px;
	height: 200px;
	background: #666;
	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	-o-border-radius: 200px;
}
.disc::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 40px;
	width: 180px;
	height: 180px;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom,
		from(#fafafa),
		color-stop(.4, #fff),
		color-stop(.6, #fff),
		to(#fafafa));
	background: -moz-linear-gradient(top,
		#fafafa,
		#fff 40%,
		#fff 70%,
		#fafafa);
	background: linear-gradient(top,
		#fafafa,
		#fff 40%,
		#fff 70%,
		#fafafa);
	border-radius: 180px;
	-webkit-border-radius: 180px;
	-moz-border-radius: 180px;
	-o-border-radius: 180px;
}
.disc span {}
.disc span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 110px;
	margin-left: 110px;
	width: 30px;
	height: 30px;
	background: #ffc;
	border: 5px double #666;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-o-border-radius: 40px;
	z-index: 1;
}
.disc span::after {
}

/* Twitter
---------------------------------------------------*/
.twitter {background: #aee;}
.twitter::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 60px;
	width: 50px;
	height: 125px;
	background: #fff;
	border-radius: 25px 25px 0 0;
	-webkit-border-radius: 25px 25px 0 0;
	-moz-border-radius: 25px 25px 0 0;
	-o-border-radius: 25px 25px 0 0;
}
.twitter::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 80px;
	margin-left: 60px;
	width: 50px;
	height: 50px;
	border-color: transparent transparent #fff transparent;
	border-style: solid;
	border-width: 50px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.twitter span {}
.twitter span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 80px;
	margin-left: 110px;
	width: 100px;
	height: 50px;
	background: #fff;
	border-radius: 0 25px 25px 0;
	-webkit-border-radius: 0 25px 25px 0;
	-moz-border-radius: 0 25px 25px 0;
	-o-border-radius: 0 25px 25px 0;
}
.twitter span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 180px;
	margin-left: 135px;
	width: 75px;
	height: 50px;
	background: #fff;
	border-radius: 0 25px 25px 0;
	-webkit-border-radius: 0 25px 25px 0;
	-moz-border-radius: 0 25px 25px 0;
	-o-border-radius: 0 25px 25px 0;
}

/* House
---------------------------------------------------*/
.house {background: #bb3;}
.house::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 35px;
	margin-left: 50px;
	width: 40px;
	height: 30px;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 60px solid #333;
}
.house::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 125px;
	margin-left: 75px;
	width: 100px;
	height: 80px;
	background: #fff;
	border: solid #333;
	border-width: 0 5px 5px 5px;
	border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-o-border-radius: 0 0 3px 3px;
}
.house span {}
.house span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 145px;
	margin-left: 100px;
	width: 30px;
	height: 55px;
	background: #c33;
	border: solid #333;
	border-width: 5px 5px 0 5px;
	border-radius: 3px;
	-webkit-border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px;	
	-o-border-radius: 3px;	
	z-index: 1;
}
.house span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 175px;
	margin-left: 125px;
	width: 8px;
	height: 8px;
	background: #333;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	-o-border-radius: 8px;	
	z-index: 1;
}

/* Arrow
---------------------------------------------------*/
.arrow {background: #fff;}
.arrow::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 100px;
	margin-left: 170px;
	width: 30px;
	height: 100px;
	background: #000;
}
.arrow::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 170px;
	margin-left: 100px;
	width: 100px;
	height: 30px;
	background: #000;
}
.arrow span {}
.arrow span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 60px;
	margin-left: 110px;
	width: 30px;
	height: 130px;
	background: #000;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
.arrow span::after {}

/* star
---------------------------------------------------*/
.star {background: #333;}
.star::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 60px;
	width: 0;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-bottom: 180px solid #ee3;
}
.star::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 185px;
	margin-left: 60px;
	width: 0;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-bottom: 35px solid #333;
}
.star span {}
.star span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 100px;
	margin-left: 40px;
	width: 0;
	height: 0;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	border-top: 100px solid #ee3;
}
.star span::after {}

/* Facebook
---------------------------------------------------*/
.facebook {
	background: #369;
	background: -webkit-gradient(linear, left top, left bottom,
		from(#58b),
		color-stop(0.008, #58b),
		color-stop(0.01, #369),
		color-stop(0.799, #369),
		color-stop(0.8, #58b),
		to(#58b));
	background: -moz-linear-gradient(top,
		#58b,
		#58b 0.8%,
		#369 1%,
		#369 79.9%,
		#58b 80%,
		#58b);
	}
.facebook::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 150px;
	width: 50px;
	height: 50px;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 50px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.facebook::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 105px;
	margin-left: 150px;
	width: 50px;
	height: 155px;
	background: #fff;
}
.facebook span {}
.facebook span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 225px;
	width: 25px;
	height: 50px;
	background: #fff;
}
.facebook span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 120px;
	margin-left: 110px;
	width: 140px;
	height: 50px;
	background: #fff;
}

/* Graph
---------------------------------------------------*/
.graph {background: #393;}
.graph::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 35px;
	margin-left: 25px;
	width: 0;
	height: 0;
	border-color: transparent #fff #fff #fff;
	border-style: solid;
	border-width: 100px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	z-index: 1;
}
.graph::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 30px;
	margin-left: 30px;
	width: 0;
	height: 0;
	border-color: #fc3 transparent transparent transparent;
	border-style: solid;
	border-width: 100px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.graph span {}
.graph span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 34px;
	margin-left: 24px;
	width: 0;
	height: 0;
	border-color: transparent #060 #060 #060;
	border-style: solid;
	border-width: 101px;
	border-radius: 101px;
	-webkit-border-radius: 101px;
	-moz-border-radius: 101px;
	-o-border-radius: 101px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.graph span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 29px;
	margin-left: 29px;
	width: 0;
	height: 0;
	border-color: #060 transparent transparent transparent;
	border-style: solid;
	border-width: 101px;
	border-radius: 101px;
	-webkit-border-radius: 101px;
	-moz-border-radius: 101px;
	-o-border-radius: 101px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/* Smoke
---------------------------------------------------*/
.smoke {background: #999;}
.smoke::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 170px;
	margin-left: 60px;
	width: 160px;
	height: 30px;
	background: #fff;
}
.smoke::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 170px;
	margin-left: 45px;
	width: 10px;
	height: 30px;
	background: #ccc;
	background: -webkit-gradient(linear, left top, right top,
		from(#c33),
		color-stop(0.3, #ccc),
		to(#ccc));
	background: -moz-linear-gradient(left,
		#c33,
		#ccc 30%,
		#ccc);
	background: linear-gradient(left,
		#c33,
		#ccc 30%,
		#ccc);
	border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-o-border-radius: 3px 0 0 3px;
}
.smoke span {}
.smoke span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 40px;
	margin-left: 50px;
	width: 10px;
	height: 60px;
	background: #eee;
	border-radius: 0 10px 10px 0 / 0 30px 30px 0;
	-webkit-border-radius: 0 10px 10px 0 / 0 30px 30px 0;
	-moz-border-radius: 0 10px 10px 0 / 0 30px 30px 0;
	-o-border-radius: 0 10px 10px 0 / 0 30px 30px 0;
}
.smoke span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 80px;
	margin-left: 40px;
	width: 10px;
	height: 60px;
	background: #eee;
	border-radius: 10px 0 0 10px / 30px 0 0 30px;
	-webkit-border-radius: 10px 0 0 10px / 30px 0 0 30px;
	-moz-border-radius: 10px 0 0 10px / 30px 0 0 30px;
	-o-border-radius: 10px 0 0 10px / 30px 0 0 30px;
}

/* Letter
---------------------------------------------------*/
.letter {background: #c66;}
.letter::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 75px;
	margin-left: 45px;
	width: 160px;
	height: 120px;
	background: #fff;
	border: 5px solid #333;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.letter::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 80px;
	margin-left: 45px;
	width: 0;
	height: 0;
	border-left: 85px solid transparent;
	border-right: 85px solid transparent;
	border-top: 75px solid #333;
}
.letter span {}
.letter span::before {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 130px;
	margin-left: 45px;
	width: 0;
	height: 0;
	border-left: 85px solid transparent;
	border-right: 85px solid transparent;
	border-bottom: 70px solid #333;
}
.letter span::after {
	display: block;
	content: " ";
	position: absolute;
	margin-top: 135px;
	margin-left: 50px;
	width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 65px solid #fff;
}

CSS Drawing 自体が実用的じゃない気がするけど、何かで役立つかもしれない。こういうのは自分で色々試さないと覚えないなあ。やっても手探り過ぎて覚えないけど……
図形を描くまではいかないけど、こういうジェネレーターみたいなの使って、いろいろ試してみるのもいいと思う。三角形系のは見当たらなかった。

図形描くだけなら Canvas 使ったほうがいいのかな?不勉強で良く解らん。

以上です。

参考関連記事



1 Comment(s)

現在コメントを受け付けていません。

no Trackback...

現在トラックバックを受け付けていません。