見出しや吹き出しにつける三角をCSSでつくる

span{
	display: inline-block;
	border: 20px solid;
	border-top-color: red;
	border-right-color: #000;
	border-bottom-color: green;
	border-left-color: blue;
}

.triangle-right::before{
	display: inline-block;
	content: "";
	border: 6px solid transparent; /* 一度透明にして */
	border-left-color: blue; /* 色つけたい場所に色つける */
}

<h2 class="triangle-right">見出し</h2>
<p class="triangle-right">テキスト</p>

見出し

テキスト