[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル

サイト構築 -CSS

Post on:2010年12月3日

sponsorsr

画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。

CSS Quick Tip: CSS Arrows and Shapes Without Markup
デモページ（当方作成）

[ad#ad-2]

下記は各ポイントを意訳したものです。

CSSで三角形を作成する仕組み
CSSで作成した三角形を使って吹き出しを作成
CSSで作成した三角形をさらに応用
対応ブラウザ

CSSで三角形を作成する仕組み

まずは基本となる三角形の作り方です。
三つにStepを分けて、解説します。

デモページ（当方作成）

CSS：Step 1

三角形の元となる四角形を作成します。
三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。
height, widthは仮のものです。

.step1{
	height:20px;
	width:20px;
	border:10px solid #000;
	border-top-color:#ccc;
}

CSS：Step 2

三角形に使用するのはボーダーのみです。
ボックスの形状は必要無いので、height, widthに「0」を指定します。

.step2{
	height:0;
	width:0;
}

CSS：Step 3

三角形を成している「border-top」の箇所のみ、可視にします。

.step3{
	border-color:transparent;
	border-top-color:#ccc;
}

CSSで作成した三角形を使って吹き出しを作成

三角形を矩形につけて、吹き出しを作成します。三角形の位置は自由に変更できます。

デモページ（当方作成）

CSS：デモ1（左端）

三角形を矩形の下辺の左に表示させます。

.demo1 {
	background-color: #333;
	height: 100px;
	position: relative;
	width: 100px;
}
.demo1:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;
	border-top-color: #333;
	top: 100%;
	left: 10px;
}

CSS：デモ2（真ん中）

三角形を矩形の下辺の真ん中に表示させます。

.demo2 {
	background-color: #333;
	height: 100px;
	position: relative;
	width: 100px;
}
.demo2:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;
	border-top-color: #333;
	top: 100%;
	left: 50%;
	margin-left: -10px;
}

CSS：デモ3（右端）

三角形を矩形の右辺の上に表示させます。

.demo3{
	background-color: #333;
	height: 100px;
	position: relative;
	width: 100px;
}
.demo3:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;
	border-left-color: #333;
	left: 100%;
	top: 10px;
}

CSSで作成した三角形をさらに応用

ボーダーを使用した形状はさまざまな形に応用することができます。

デモページ（当方作成）

[ad#ad-2]

CSS：デモ4

ボックスに適用したボーダーを同じように三角形に適用することもできます。
また、ボックスの内側に三角形を配置し、自身を指すようにもできます。

.demo4 {
	width: 100px;
	height: 100px;
	background-color: #ccc;
	position: relative;
	border: 4px solid #333;
}
.demo4:after, .demo4:before {
	border: solid transparent;
	content: ' ';
	height: 0;
	left: 100%;
	position: absolute;
	width: 0;
}
.demo4:after {
	border-width: 9px;
	border-left-color: #ccc;
	top: 15px;
}
.demo4:before {
	border-width: 14px;
	border-left-color: #333;
	top: 10px;
}

デモページ（当方作成）

CSS：デモ5

紙を折り返したようなエフェクトも三角形を重ねることで作成できます。
三角形の「border-left」と「border-right」の値を調整します。シャドウも一緒に作成すると、さらにリアルに見えます。

.demo5 {
	background-color: #ccc;
	height: 30px;
	position: relative;
	width: 100px;
}
.demo5:before {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;

	border-width: 10px;
	border-top-color: #ccc;
	border-left-width: 50px;
	border-right-width: 0;
	top: 100%;
	left: 0;
}
.demo5:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;

	border-width: 2px;
	border-top-color: #777;
	border-left-width: 50px;
	border-right-width: 0;
	top: 100%;
	left: 0;
}