CSSでの三角形の書き方を理解する【 border と clip-path 】

## はじめに
今までcssでの三角形の作り方について理解せずコピペで対応していましたが、
いつまでも応用できず向きを変えるのさえ手間取っていました。

なので三角形の書き方を整理したいと思います。

## 三角形の書き方は2種類ある

- `border`で作成
- `clip-path`で作成

従来`border`で作る方法が一般的でしたが、最近は`clip-path`使用も増えてきました。

`clip-path`はIE11では使用できないので、対応させる場合は従来通り`border`を使用してください。

https://caniuse.com/?search=clip-path

## borderで三角形作る
ジェネレータを使ってコードを作成してみると以下のコードが出てきました。
```
.triangle {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 100px solid blue;
	}
 ```
このコードの`transparent`にカラーを入れてみると...
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="dyLZRGE" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/dyLZRGE">
  borderで三角形を書く01</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


四角形の中に三角形が4つできます。

この4つのうちの1つ残すことで、三角形として使用していたんですね。


縦横100pxの四角形も比較として下に作成いたしました。

比べてみてもわかりますが、
borderで**線の太さ**として`100px`と指定している部分が**三角形の高さ**になります

![image01_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/12e1da39-2d58-d524-0f40-067cf2033d7f.png)

#### 作成手順①
三角形を
- 上向きにしたいなら、`border-bottom`の色と三角形の高さを指定する
- 右向きにしたいなら、`border-left`の色と三角形の高さを指定する
- 左向きにしたいなら、`border-right`の色と三角形の高さを指定する
- 下向きにしたいなら、`border-top`の色と三角形の高さを指定する


:::note info
四角形を区切って三角形を作っていることを意識することで
三角形の向きは理解できました！
:::

#### 作成手順②
それ以外のborderは色を`transparent`を指定する

#### 作成手順③
widthとheightは0指定する

#### 作成手順④
透明にしただけだと透明部分が余白として邪魔になるので、
`カラーを指定した反対部分のborderを0`にする


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="qBwVvXv" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/qBwVvXv">
  ちょっと省略して書く三角形</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



今回は`border-top: 0; `を記述することで余白を取っていた上の三角形を削除しています。

### borderで三角形を作るポイント まとめ
:::note info
borderで線の太さを太くすることで四角形の中に三角形を4つ作っていた
:::
:::note info
1つだけ色をつけ、その他を透明にすることで三角形としていた
:::
:::note info
widthとheightは0にすると大きさを考えやすい
:::

## clip-pathで三角形を作る
### clip-pathとは

`clip-path`は何ができるかというと、
>「要素のどの部分を表示するかを設定するクリッピング領域を作ることができ、領域の内部の部分は表示され、外側の部分は非表示になる」

とのことです。

なので背景をカラー指定ではなく画像にすると、画像を切り抜いてくれるので便利ですね！

ではclip-pathで使用し、三角形を作ってみます。



#### 手順①
三角形を作成するには`clip-path`の`polygon`を使います。
`polygon`はxy上に点を指定すると直線で繋げてくれます。
なので3点指定したら三角形を作ることができますし、応用すれば矢印などを作れます。

```
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
```
これでどうxy上に点が置かれたかというと、下記の図のようなイメージです。




![アセット 3@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/e9d8bada-3632-7b5c-ac3b-cc9ecfffe633.png)

:::note warn
左上が基準(0,0)になるのがポイントです
:::



xとy軸をイメージしながら三角形の向きを考えて%で点を指定します。
```
上向きなら
clip-path: polygon(0 100%, 100% 100%, 50% 0);

右向きなら
clip-path: polygon(0 0, 0% 100%, 100% 50%);

左向きなら
clip-path: polygon(0 50%, 100% 100%, 100% 0);

下向きなら
clip-path: polygon(0 0, 50% 100%, 100% 0);

```

#### 手順②
X軸、Y軸の長さを`width`と`height`で指定します。
割と三角形の大きさを直感的にイメージできるのがいいですね。

#### 手順③
`back-ground-color`でカラーを指定して三角形の出来上がりです！


<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdgLewz" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/mdgLewz">
  clip-pathで三角形を作る</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### clip-pathで三角形を作るポイント まとめ

:::note info
clip-path: polygon を使用して % で３点の座標を指定する
:::
:::note info
座標の基準は左上
:::

## まとめ
対応ブラウザに問題がなければサイズを比較的直感で指定できる`clip-path`を使用しても良いと思いました。

参考になれば幸いです！