CSSでスラッシュ（斜め線）系の吹き出しを作るチュートリアル

画像を使用せずに簡単な吹き出しをCSSで作ることは多々あります。今回はスラッシュ（斜め線）系の吹き出しを備忘録としてチュートリアルにして残しておこうと思います。

スポンサーリンク

がっつりとした吹き出しとは異なり、ちょっとしたあしらいに使えるスラッシュ（斜め線）系の吹き出しは、付けるだけでインパクトや違いが生まれるので、使いどころとしては多いと思います。

スラッシュ（斜め線）系の吹き出しを表現するには基本的に疑似要素を用いることが多いです。疑似要素を用いることでテキスト量に左右されず、両サイドに吹き出しが付くことになります。

このチュートリアルでは、基本となる形とその他派生パターンとしていくつかデザインパターンを残しておきます。
※サイトに実装する際の構築方法は数多く存在しますので、あくまでも実装の一例になります。

縦線を斜めにして作る吹き出し（基本の形）

CSSで縦線を用意して、テキストの両端に疑似要素として配置をし、それぞれ角度を付ければ完成です。

縦線の高さを変更するときはwidthの値を、縦線の幅を変更するときはheightの値をそれぞれ変更します。高さはフォントのサイズに合わせて大きさを調整するのがよいと思います。幅は大きすぎるとスラッシュ（斜め線）が不格好になるため、変更する機会は少ないと思います。

縦線を斜めにして作る吹き出し

サンプルページを開く

html
<div>
	<div class="itemsample">サンプルテキスト1</div>
</div>
css
.itemsample {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.itemsample::before,.itemsample::after {
	content: "";
	width: 28px;
	height: 2px;
	box-sizing: border-box;
	background-color: #525252;

}
.itemsample::before {
	transform: rotate(60deg);
}
.itemsample::after {
	transform: rotate(-60deg);
}

斜め線を左右に2つずつ使う吹き出し（派生パターン1）

テキストの端に2本の線がそれぞれ付く形になるため、まずは基本形のhtmlにspanを追加し、spanにも疑似要素を付くように調整します。

CSSで縦線を2つずつ計4本を用意して、両端に2本がそれぞれ配置する形になります。

外側に配置する1本は短めに調整します。あとはテキストの両端に疑似要素として配置をし、それぞれ角度を付ければ完成です。外側に配置するスラッシュ（斜め線）の角度を強めに調整するのがポイントです。

斜め線を左右に2つずつ使う吹き出し

サンプルページを開く

html
<div>
	<div class="itemsample"><span>サンプルテキスト2</span></div>
</div>
css
.itemsample {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.itemsample::before,.itemsample::after {
	content: "";
	width: 18px;
	height: 2px;
	box-sizing: border-box;
	background-color: #525252;
	position: relative;
	bottom: -7px;

}
.itemsample::before {
	transform: rotate(40deg);
	left: 12px;
}
.itemsample::after {
	transform: rotate(-40deg);
	right: 12px;
}

.itemsample span {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.itemsample span::before,.itemsample span::after {
	content: "";
	width: 28px;
	height: 2px;
	box-sizing: border-box;
	background-color: #525252;

}
.itemsample span::before {
	transform: rotate(60deg);
}
.itemsample span::after {
	transform: rotate(-60deg);
}

斜め線の先端に丸がついている吹き出し（派生パターン2）

CSSで縦線と丸を1つずつ用意して、縦線の上に丸がつくように調整します。あとは両端に配置してそれぞれ角度を付ければ完成です。

スラッシュ（斜め線）の延長線上に丸がつくように配置するのがポイントです。

斜め線の先端に丸がついている吹き出し

サンプルページを開く

html
<div>
	<div class="itemsample"><span>サンプルテキスト3</span></div>
</div>
css
.itemsample {
	display: flex;
	justify-content: center;
	position: relative;
}
.itemsample::before,.itemsample::after {
	content: "";
	width: 4px;
	height: 4px;
	box-sizing: border-box;
	background-color: #525252;
	border-radius: 50%;
	position: relative;
	top: -2px;
}
.itemsample::before {
	left: 3px;
}
.itemsample::after {
	right: 3px;
}
.itemsample span {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.itemsample span::before,.itemsample span::after {
	content: "";
	width: 18px;
	height: 2px;
	box-sizing: border-box;
	background-color: #525252;
}
.itemsample span::before {
	transform: rotate(60deg);
}
.itemsample span::after {
	transform: rotate(-60deg);
}

三角形で作る吹き出し（先端が尖っている細い三角形）

CSSで縦長の三角形を用意して、スラッシュ（斜め線）の代わりにテキストの両端に疑似要素として配置をし、それぞれ角度を付ければ完成です。

今までは三角形を作るのにborderを使っていましたが、最近はclip-pathなるものを用いて作るようになったんですね。はじめて使いましたが確かにこれは簡単だ。

三角形で作る吹き出し

サンプルページを開く

html
<div>
	<div class="itemsample">サンプルテキスト4</div>
</div>
css
.itemsample {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.itemsample::before,.itemsample::after {
	content: "";
	background: #525252;
	height: 22px;
	width: 8px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.itemsample::before {
	transform: rotate(-30deg);
}
.itemsample::after {
	transform: rotate(30deg);
}

cssが用意できないがどうしても使いたいときは、代替え案として、吹き出しを使用したいテキストの両端に「＼」と「／」をテキストで打って、吹き出しにしてしまうのもありかもしれません。

フォントによっては見え方が変わってしまう恐れがあるので、あまりオススメはしませんが、どうしても吹き出しにしたいというときにでも…

最後に、形は違いますが昔むかしに書いた吹き出し系のチュートリアル記事もありますので、URLを載せておきます。ただ、かなり時間が経っているので、もっと簡単な書き方になっていることでしょう…

CSSで作るシンプルな吹き出し(通常、枠線のみ、下線のみ)パターン

参考

HTML・CSSで実装するかわいいフキダシのアイデア – ICS MEDIA
https://ics.media/entry/240425/

【CSS】borderを使って、三角形作るのはやめませんか？ #HTML – Qiita
https://qiita.com/degudegu2510/items/09f34d4b218c9df6bb57

PAGE TOP