【CSS】borderプロパティを使って三角形を作る方法を図と実例で解説。borderの指定数により形状が変化する。

##【CSS】borderプロパティを使って三角形を作る方法を図と実例で解説。borderの指定数により形状が変化する。

borderプロパティを使って三角形を作る方法はいくつかある。borderの指定場所によって形状が変わってくる。borderの構成を理解することが重要。

適用するタグはborderが使えれば、divでもpでもspanでもなんでもいい。

<br>
##目次

1. [borderの挙動](#borderの挙動)
    2. [色分けして確認](#色分けして確認)
    3. [横幅をなくす](#横幅をなくす)
4. [borderの数による四角形の形の違い](#borderの数による四角形の形の違い)
5. [三角形を作る方法](#三角形を作る方法)
    6.  [４辺を指定した三角形のうち、２辺を透明にする](#４辺を指定した三角形のうち２辺を透明にする)
    7.  [２辺を指定した三角形のうち、１辺を透明にする](#２辺を指定した三角形のうち１辺を透明にする)
8.  [枠線のみの三角形を作る方法](#枠線のみの三角形を作る方法)
    9. [対角線を使わない三角形の枠線](#1-対角線を使わない三角形の枠線)
    10. [対角線を使う三角形の枠線](#2-対角線を使う三角形の枠線)




##borderの挙動

###単なるdivタグ
まずはベースとして、単なるdivタグに枠線をつけた状態を確認。

```html:.html
<div class="sankaku"></div>
```

```css:.css
.sankaku{
  border: 32px solid yellowgreen;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7091f06b-618d-3173-bb15-d25e9032eab8.png)

divタグは**ブロック要素のため横幅の指定がないと画面いっぱいに広がる**。

**四角形は、boarder-top, -right, -bottom, -leftの４つの要素で構成される**。

```:
border: 32px solid yellowgreen;
```

↓　同じ

```
border-top: 32px solid yellowgreen;
border-right: 32px solid yellowgreen;
border-bottom: 32px solid yellowgreen;
border-left: 32px solid yellowgreen;
```

なので、**boarderで指定したdivタグの高さはtopとbottomを合わせた、64px = 32px + 32pxとなる**。（※32pxでないことに注意！）



###色分けして確認
わかりやすくそれぞれを色分けしてみる。

```css:
.sankaku{
  border-top: 32px solid yellow;
  border-right: 32px solid blue;
  border-bottom: 32px solid pink;
  border-left: 32px solid red;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/82d9807c-6716-643d-08b0-d41148c118f6.png)

横幅は指定してないので、画面幅に合わせて変化する。


<br>
###横幅をなくす
`display: inline-block`とすることで、横幅を中の要素に合わせることができる。

- 中身なしの場合、縦幅・横幅は０ｐｘ（外側に枠線borderが表示される）
- 中身がある場合はその長さに自動調整される。

```css:.css
.sankaku{
  display: inline-block;
  border-left: 32px solid red;
  border-right: 32px solid blue;
  border-bottom: 32px solid pink;
  border-top: 32px solid yellow;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ed9294c8-cfba-d353-f927-56a66240d97f.png)

ここで単純に、黄色と赤色の２つで対角線を使った三角形が作れるじゃん！と思うとborderのワナにハマる、、、

指定してある要素の数（borderの数）によって四角形の形が大きく変わってくる。


<br>
**▼（参考）中身を入れた場合**

`<div class="sankaku">中身がある場合</div>`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/1f9df037-165d-d0f1-ba74-894f677cf5de.png)


##borderの数による四角形の形の違い

borderを指定する数によって、形状が変化していく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d95ae212-b4b9-eca3-155f-8fb6f6c4b1d0.png)

- 4辺を指定：　大きな正方形
- 3辺を指定：　長方形
- 2辺を指定：　小さな正方形


###2辺を指定した小さな正方形
小さな正方形は指定の組み合わせによって、同じ形状が作れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/00b82ca8-30fa-ac2b-6859-d5b706a17ccc.png)

なお、border-topと-bottom,  border-leftと-rightの組み合わせは何も表示されない。



<br>
##三角形を作る方法
三角形を作る方法は２つある。

- ４辺を指定した三角形のうち、２辺を透明にする
- ２辺を指定した三角形のうち、１辺を透明にする


###４辺を指定した三角形のうち、２辺を透明にする

```css:.css
.sankaku{
  display: inline-block;
  border: 32px solid transparent;
  border-top: 32px solid yellow;
  border-right: 32px solid blue;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8f718f12-2c20-bce7-b07a-0c7bc459f8e1.png)

この色を同じ色にすれば、対角線を使った三角形になる。


▼実態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c99a44ae-cad7-becf-9c21-cf23234f5647.png)


上記はborderで４つまとめてtransparentに設定した後に上書きしたが、４つそれぞれを設定するのでも同じ。

```css:.css（同等）
.sankaku{
  display: inline-block;
  border-top: 32px solid yellow;
  border-right: 32px solid blue;
  border-bottom: 32px solid transparent;
  border-left: 32px solid transparent;
}
```

コード量からすると、borderを使い、上書きする方が少ない。



<br>
##２辺を指定した三角形のうち、１辺を透明にする

```css:.css
.sankaku{
  display: inline-block;
  border-top: 32px solid yellow;
  border-left: 32px solid transparent;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/161ef53a-6386-40d8-6ad5-7d318500a60e.png)


**▼実態**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e9586ece-e30d-2726-790c-b4d7bf6d1f57.png)


<br>
上記は、-topと-leftを使ったが、-bottomと-rightでも作成できる。

```css:.css
.sankaku{
  display: inline-block;
  border-right: 32px solid blue;
  border-bottom: 32px solid transparent;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a72e34f9-1684-3fa2-0b13-be9274be2729.png)





<br>
##枠線のみの三角形を作る方法
吹き出しなどで使われる枠線のみの三角形を作る方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c2677071-4644-0f8e-89eb-aaad4ab5de78.png)


↑ 左端の三角形


三角形の形状は２つある。

**1. 対角線を使わない三角形の枠線**
**2. 対角線を使う三角形の枠線**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/cad41d2c-e83e-6ce2-a2db-e7a6bee1ae03.png)



<br>
###1. 対角線を使わない三角形の枠線
三角形を作るには、borderの枠線の太さ + 中の要素によるスペースを利用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c35ea977-9af3-3897-9a1b-47b67c3abe10.png)



```css:.css
.sankaku{
  width: 100px;
  height: 100px;
  display: inline-block;
  border-bottom: 32px solid pink;
  border-left: 32px solid red;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c3248261-10fe-7835-8f78-9eb3aa159d98.png)


これを、色を統一して、時計回りに45度回転させれば完成。


```css:.css
.sankaku{
  width: 100px;
  height: 100px;
  display: inline-block;
  border-bottom: 32px solid lightgray;
  border-left: 32px solid lightgray;
  transform: rotate(45deg);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/cd811711-7adf-c3be-eee5-6f57d47ddbaf.png)



<br>
###2. 対角線を使う三角形の枠線
枠線の色で塗り潰した三角形を作って、上から少し小さい白い三角形を重ねる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6832a1f8-56ce-464c-33b4-a1d4c1370358.png)

グレーの三角を重ねた場合のイメージ。（白だと見えないので）

吹き出しの外枠をdivタグで作成し、枠線の三角を`::before`で、内側の白い三角形を`::after`で作って配置する。

```css:.css
.sankaku {
  position: relative;
}
.sankaku::before {
  content: "";
  border-left: 16px solid transparent;
  border-top: 16px solid #ccc;
  position: absolute;
}
.sankaku::after {
  content: "";
  border-left: 15px solid transparent;
  border-top: 15px solid white;
  position: absolute;
  top: 1px;
  left: 2px;
}
```

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d96c76b9-32ae-54e9-983a-e0e5d73eb1ba.png)|
|:--|


<br>
以上。