少し難しい矢印デザインCSS02-1

こんにちは。今日は前回とはまた違った「少し難しい矢印デザインのCSS」についてメモがてら書こうと思います。

今回は少し長くなると思うので記事を2回に分けます！

ちなみに、矢印デザインはこんな感じです↓

この手の矢印はテキストが可変してもある程度崩れないようにしたり、レスポンシブ対応するのが大変ですよね・・・

しかし！三角関数の知識を使うというトリッキーな方法を教えていただきましたm(_ _)m

今日は前提知識として「三角関数」について触れた上で計算方法について書きます＾＾（ほぼ数学の勉強です笑）

三角関数計算サイト

まず、今回使う便利なサイトについて。

今回のコーディングでは、サイン・コサイン・タンジェントといった三角関数の計算をします。（懐かしい・・・笑）

学生の頃はこんなもんいつ使うねんと思っていましたが、まさかのその機会がきました笑

使うサイトはコチラ

三角関数（度）

サイン、コサイン、タンジェントなどの三角関数を度単位で計算します。

keisan.casio.jp

ちなみに、三角関数を使って求めたい値は緑の線部分です。

ひとまず全体像として簡単に矢印の作り方を説明すると、緑の線部分は擬似要素before、下にある反対側部分をafterで作ります。
反対側部分も同じ考え方で作れるので今回は上部分（緑線）だけ説明します。

aの部分はこの箱の高さの半分で、角度もデザインから測ることができます。

計算方法

1.計算サイトへいき、aと角度はわかっておりcを求めたいので使うのはコサイン。

↓

2.角度の20を入力し、「計算」というボタンをクリックすると、値が出てきます。

3.この値を使って計算式に当てはめます。

0.9396926=a/c

aを仮に1とすると
0.9396926=1/c

両辺にcをかけると
0.9396926c=1

c=1/0.9396926
c=1.064177・・・

つまり、cはaの約1.064177倍ということがわかりました。
そして倍というのはscaleで実装できます。

→transform;scale(1.064177);

考え方としては、こんな感じです。
来週はコードについて書きますね。