CSS | ルーローの三角形(Reuleaux triangle)の作り方
CSSでルーローの三角形を作成を紹介しています。
ルーローの三角形の作り方
CSSのborderプロパティとrotate()による回転を利用してルーローの三角形を作成する方法です。
参考:css – How to create reuleaux triangle shape using CSS3 – Stack Overflow
参考: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>
3つの扇形にした要素を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);
}
ディスカッション
コメント一覧
まだ、コメントがありません