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

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

デモのキャプチャ

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

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

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で作成した三角形をさらに応用

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

デモのキャプチャ

デモページ(当方作成)

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

対応ブラウザ

このスタイルシートはIE8を含めた主要ブラウザでサポートされます。
例外はIE6, 7です。この二つは疑似要素「:before」「:after」をサポートしていないため、吹き出しや折り返しは三角形が無い状態で表示されます。

サイトのキャプチャ

この三角形はユーザーに役立つビジュアルを追加するものとなりますが、IE6, 7で表示した際にも情報取得に支障がないように使用するのがポイントです。

top of page

©2017 coliss