CSS | ルーローの三角形（Reuleaux triangle）の作り方

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

CSSでルーローの三角形を作成を紹介しています。

ルーローの三角形の作り方

CSSのborderプロパティとrotate()による回転を利用してルーローの三角形を作成する方法です。

参考：css – How to create reuleaux triangle shape using CSS3 – Stack Overflow

参考：ルーローの三角形 – Wikipedia

参考：CSS Reuleaux triangle single-element

See the Pen CSS RT by yochans (@yochans) on CodePen.

HTML要素には子要素として3つdivタグを追加しています。

<div class="reuleaux-triangle-1">
	<div></div><div></div><div></div>
</div>

３つの扇形にした要素を120度間隔で回転させて位置調整います。

.reuleaux-triangle-1 {
	width: 150px;
	height: 150px;
	position: relative;
}

.reuleaux-triangle-1 div {
	position: absolute;
	border-left: 84px solid transparent;
	border-right: 84px solid transparent;
	border-top: 120px solid #3cb371;
	border-radius: 50%;
}

.reuleaux-triangle-1 div:nth-of-type(1) {
	top: 4px;
	left: -7px;
}

.reuleaux-triangle-1 div:nth-of-type(2) {
	top: 9px;
	left: -4px;
	transform: rotate(120deg);
}

.reuleaux-triangle-1 div:nth-of-type(3) {
	top: 9px;
	left: -10px;
	transform: rotate(240deg);
}