CSS | 角丸な三角形（Rounded triangle）の作り方

2021-06-19CSS 図形デザイン,CSS

角丸な三角形（Rounded triangle）をCSSで作成を紹介しています。

角が丸くない三角形の作り方は以下の記事で紹介しています。

CSS | 正三角形（Equilateral Triangle）の作り方

CSSで正三角形をshadowプロパティを使って作成する方法と、clip-pathのpolygonを使って作成する方法の ...

 https://1-notes.com/css-shape-equilateral-triangle-design/

角丸な三角形の作り方

CSSの疑似要素、borderによる角丸、rotate()による回転を利用して角丸な三角形を作成する方法です。

See the Pen CSS | Rounded triangle by yochans (@yochans) on CodePen.

同色にしたものと、作業用にパーツごとに色を変更しているものを入れる要素を作成しています。

パーツに必要な3つのdivタグを追加します。

<div class="double-circle-1">
	<div></div><div></div><div></div>
</div>

<div class="double-circle-2">
	<div></div><div></div><div></div>
</div>

CSSは本体はサイズのみ持たせています。

3つの子要素にはそれぞれ角が丸い長方形を作成、回転と位置を調節してそれぞれの角が重なるようにして角丸三角形を形成しています。

360度を3つの要素で回転して上向きの三角形を形成するには、下の部分（1）が0度、左の部分（2）が-240度、右の部分（3）が240度となります。

作成する長方形のサイズによって重なりのズレやはみ出しが発生しやすいですので、それぞれとtopとleftで位置を調節します。

長方形の高さ（短い方の幅）を小さくすれば角丸具合を抑える事ができますが、中央部分の穴埋めができず隙間が生まれます。
その場合、本体の親要素やその疑似要素で穴分の円を埋めるかする必要があります。

角の丸み加減自体に問題がない場合は、本体のtransformプロパティでサイズ（scale）と角度(rotate)を調節した方が楽だと思います。

.double-circle-1 {
	width: 150px;
	height: 150px;
	position: relative;
	transform: scale(1); /* サイズ調節用 */
	transform: rotate(0deg); /* 角度調節用 */
}

.double-circle-1 div {	
	content: "";
	width: 150px;
	height: 60px;
	position: absolute;
	border-radius: 55px;
	background: #4169e1;
}

.double-circle-1 div:nth-of-type(1) {
	top: 85px;
	left: 0;
}

.double-circle-1 div:nth-of-type(2) {
	top: 45px;
	left: -25px;
	transform: rotate(-240deg);
}

.double-circle-1 div:nth-of-type(3) {
	top: 45px;
	left: 25px;
	transform: rotate(240deg);
}

パーツ毎の色違いバージョン

.double-circle-2 {
	width: 150px;
	height: 150px;
	position: relative;
	transform: scale(1); /* サイズ調節用 */
	transform: rotate(0deg); /* 角度調節用 */
}

.double-circle-2 div {	
	content: "";
	width: 150px;
	height: 60px;
	position: absolute;
	border-radius: 55px;
	background: blue;
	opacity: 0.8;
}


.double-circle-2 div:nth-of-type(1) {
	top: 85px;
	left: 0;
	background: blue;
}

.double-circle-2 div:nth-of-type(2) {
	top: 45px;
	left: -25px;
	transform: rotate(-240deg);
	background: red;
}

.double-circle-2 div:nth-of-type(3) {
	top: 45px;
	left: 25px;
	transform: rotate(240deg);
	background: green;
}