CSSで図形を描く仕組み

## borderを使って三角形を描く方法まとめ

釣りのためにタイトルはああなっているけど、原理を知る上で重要なのは台形の描き方。

まずは、よくサンプルで見かけるものから。

```html
    <div style="width: 0px;
                height: 0px;
                border-top: 20px solid #000;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;
                border-left: 20px solid #00F;">
    </div>
```
![border-square.png](https://qiita-image-store.s3.amazonaws.com/0/48832/860017a2-0b1c-bd13-b4c3-dab3144a9d21.png)


このdivにwidthとheightを指定すると、

```html
    <div style="width: 10px;
                height: 10px;
                border-top: 20px solid #000;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;
                border-left: 20px solid #00F;">
    </div>
```
![border-square2.png](https://qiita-image-store.s3.amazonaws.com/0/48832/0a7861e4-e7dd-ad51-29a0-761c88010ef8.png)


こうなる。


### 仕組み

borderがどのように生成されているかを理解するために、あと2つの例を出す。

```html
    <div style="width: 10px;
                height: 10px;
                border-bottom: 20px solid #0F0;">
    </div>
```
![border-square3.png](https://qiita-image-store.s3.amazonaws.com/0/48832/2e888cc8-19c3-c20d-1c0d-a8d33fe3442c.png)


```html
    <div style="width: 10px;
                height: 10px;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;">
    </div>
```
![border-square4.png](https://qiita-image-store.s3.amazonaws.com/0/48832/fa228bde-990e-cdd1-5dee-a3bf6cd97b2b.png)


つまり、border-bottomの例では、こうやってborderが描画されている。
![border-square5.png](https://qiita-image-store.s3.amazonaws.com/0/48832/7767b139-5dea-24ee-3d56-fa464dc36171.png)


三角形を描きたい場合は、divのwidthを0pxにすることで、div寄りの辺の長さを0にしている。
これで自由自在！

```html
    <div style="margin: auto;
                width: 0px;
                height: 0px;
                border-right: 80px solid transparent;
                border-bottom: 40px solid #0F0;
                border-left: 20px solid transparent;">
    </div>
```
![border-triangle.png](https://qiita-image-store.s3.amazonaws.com/0/48832/25282376-39b8-ba72-bff4-61e431f96cfe.png)


## borderを使って三日月形を描く

border-radiusを利用すれば、三日月形の描画もできる。

`
    <div style="width: 30px;
                height: 70px;
                border-left: 20px solid #FF0;
                border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;">
    </div>
`
![crescent.png](https://qiita-image-store.s3.amazonaws.com/0/48832/795ef739-3074-d140-975d-d824352fbd79.png)


### 仕組み

なぜこういう形になるかは、divに色を付けるとわかりやすい。

```html
    <div style="width: 30px;
                height: 70px;
                border-left: 20px solid #FF0;
                border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;
                background-color: #000;">
    </div>
```

![crescent2.png](https://qiita-image-store.s3.amazonaws.com/0/48832/d5ad2244-76e7-c7e8-4a10-31f5d450efd1.png)



三日月形のポイントは、

1. 出っ張らせたい側のborder-radiusの値を大きめにとる
1. 他のborderを描かない

の2点である。
1 については、角を思いっきり丸めて div で半円型を作ることでこのような形になる。

2 については、組み合わせ次第で妙な形を作ることもできるので、応用する場合は自由である。

```html
    <div style="width: 60px;
                height: 19px;
                border-top: 14px solid #ff6c00;
                border-right: 1px solid #ff6c00;
                border-bottom: 13px solid #ff6c00;
                border-left: 1px solid #ff6c00;
                border-radius: 60px 60px 20px 20px / 60px 60px 20px 20px;
                background-color: #339a14;">
    </div>
```

![crescent3.png](https://qiita-image-store.s3.amazonaws.com/0/48832/624f7afc-5953-f5f8-e868-feab0a37963c.png)

ハンバーガーに…見えないですね。すごいや。