【CSS】三角形(吹き出し)の表示位置・形・大きさのコツ

CSSの擬似要素(:before、:after)を使用して三角形で吹き出しを作るコツです。

CSSで作成する三角形で当初難しかったのは
・サイズの調整
・表示位置の調整
でした。

今回は、上記がわかったので記事にしてみます。

まず三角形の原理から、
実は三角に見えてこっそり四角なんです。
CSS三角形の原理

  border-top: 10px solid transparent;
  border-right: 10px solid #db0000;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;

CSS三角形の原理2
※transparentは無色透明です。

実際にHTML/CSSを用意して、ブラウザで見るとこうなります。
赤い吹き出しを作成しました。
HTML/CSSはこうなってます。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.balloon {
	padding: 20px;
	margin: 0 0 0 20px;
	color: #ffffff;
	background: #db0000;
	position: relative;
}
.balloon:after{
	content: "";
	width: 0;
	height: 0;

	border-top: 10px solid transparent;
	border-right: 10px solid #db0000;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;

	position: absolute;
	left: -20px;
	top: 50%;
	margin-top: -10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
</head>

<body>

<div class="balloon">
<p>三角形で吹き出し作るの楽しいよ!</p>
</div>
</body>
</html>

次に表示位置の調整の仕方ですが、

	left: -20px;/*四角の幅*/
	top: 50%;
	margin-top: -10px;/*四角の幅÷2*/

こうなってます。

なので、上部なら
赤い吹き出しを作成しました。

.balloon:after{
	content: "";
	width: 0;
	height: 0;

	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #db0000;
	border-left: 10px solid transparent;

	position: absolute;
	top: -20px;
	left: 50%;
	margin-left: -10px;
}

こうなって、

右側なら
赤い吹き出しを作成しました。

.balloon:after{
	content: "";
	width: 0;
	height: 0;

	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #db0000;

	position: absolute;
	right: -20px;
	top: 50%;
	margin-top: -10px;
}

こうなって、

下側なら
赤い吹き出しを作成しました。

.balloon:after{
	content: "";
	width: 0;
	height: 0;

	border-top: 10px solid #db0000;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;

	position: absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -10px;
}

こうなります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です