三角関数CSSのデモ
デモ共通CSS
.box {
width: var(--base); /* 底辺 */
height: var(--height); /* 高さ */
.h {
width: var(--h); /* 斜辺 */
rotate: var(--angle); /* 角度 */
}
}
1. 角度と底辺から斜辺と高さを計算
/* 1. 角度と底辺から斜辺と高さを計算 */
.sample1 {
--angle: 30deg; /* 角度 */
--base: 500px; /* 底辺 */
--height: calc(var(--base) * tan(var(--angle))); /* 高さ ⇒ 288.672px */
--h: calc(var(--base) / cos(var(--angle))); /* 斜辺 ⇒ 577.344px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
30 |
30 |
| 底辺 |
|
500 |
500 |
| 高さ |
|
|
288.67513459481 |
| 斜辺 |
|
|
577.35026918963 |
2. 角度と高さから底辺と斜辺を計算
/* 2. 角度と高さから底辺と斜辺を計算 */
.sample2 {
--angle: 30deg; /* 角度 */
--height: 300px; /* 高さ */
--base: calc(var(--height) / tan(var(--angle))); /* 底辺 ⇒ 519.609px */
--h: calc(var(--height) / sin(var(--angle))); /* 斜辺 ⇒ 600px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
30 |
30 |
| 底辺 |
|
|
519.61524227066 |
| 高さ |
|
300 |
300 |
| 斜辺 |
|
|
600 |
3. 角度と斜辺から底辺と高さを計算
/* 3. 角度と斜辺から底辺と高さを計算 */
.sample3 {
--angle: 30deg; /* 角度 */
--h: 500px; /* 斜辺 */
--base: calc(var(--h) * cos(var(--angle))); /* 底辺 ⇒ 433px */
--height: calc(var(--h) * sin(var(--angle))); /* 高さ ⇒ 250px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
30 |
30 |
| 底辺 |
|
|
433.01270189222 |
| 高さ |
|
|
250 |
| 斜辺 |
|
500 |
500 |
4. 底辺と高さから角度と斜辺を計算
/* 4. 底辺と高さから角度と斜辺を計算 */
.sample4 {
--base: 400px; /* 底辺 */
--height: 300px; /* 高さ */
--angle: atan2(var(--height), var(--base)); /* 角度 ⇒ 36.8699deg */
--h: hypot(var(--base), var(--height)); /* 斜辺 ⇒ 500px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
|
36.869897645844 |
| 底辺 |
|
400 |
400 |
| 高さ |
|
300 |
300 |
| 斜辺 |
|
|
500 |
5. 底辺と斜辺から角度と高さを計算
/* 5. 底辺と斜辺から角度と高さを計算 */
.sample5 {
--base: 400px; /* 底辺（ピクセル） */
--base-num: 400; /* 底辺（数値） */
--h: 500px; /* 斜辺（ピクセル） */
--h-num: 500; /* 斜辺（数値） */
--angle: acos(var(--base-num) / var(--h-num)); /* 角度 ⇒ 36.8699deg */
--height: calc(var(--base) * tan(var(--angle))); /* 高さ ⇒ 288.672px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
|
36.869897645844 |
| 底辺 |
|
400 |
400 |
| 高さ |
|
|
300 |
| 斜辺 |
|
500 |
500 |
6. 高さと斜辺から角度と底辺を計算
/* 6. 高さと斜辺から角度と底辺を計算 */
.sample6 {
--height: 300px; /* 高さ（ピクセル） */
--height-num: 300; /* 高さ（数値） */
--h: 500px; /* 斜辺（ピクセル） */
--h-num: 500; /* 斜辺（数値） */
--angle: asin(var(--height-num) / var(--h-num)); /* 角度 ⇒ 36.8699deg */
--base: calc(var(--h) * cos(var(--angle))); /* 底辺 ⇒ 400px */
}
|
CSS |
JavaScript |
CASIO |
| 角度 |
|
|
36.869897645844 |
| 底辺 |
|
|
400 |
| 高さ |
|
300 |
300 |
| 斜辺 |
|
500 |
500 |