緑と黒のチェック柄の羽織りアイコンをCSSで作る

# できたもの

こういうものを作ります。

![スクリーンショット 2020-12-05 1.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123809/fe55ac88-b9bb-9bd1-0a9c-77c36d23bbe5.png)

# 作り方

作り方を3ステップで解説していきます。

### Step1. チェック柄の背景を作る

様々な方法がありますが、今回は[conic-gradient( )](https://developer.mozilla.org/ja/docs/Web/CSS/conic-gradient())を使用しました。

`conic-gradient()`は円周状のグラデーションを得るための関数ですが、色経由点を明確に定義することでグラデーションなしの背景を得ることもできます。例えば、

```css
.four {
  background-image: conic-gradient(blue 90deg, red 90deg 180deg, yellow 180deg 270deg, green 270deg);
}
```

であれば、

- 0度から90度までは青
- 90度から180度までは赤
- 180度からは240度までは黄
- 240度から360度までは緑

の背景が得られます（0度は時計の12時の位置）。

![スクリーンショット 2020-12-05 0.44.58.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123809/25ace310-54e3-e5c4-81ae-345e0e653fdd.jpeg)

そのためこれの、①対角にある色を同じ色にして②`background-repeat: repeat`で繰り返せばチェック模様が作れることになります。簡単ですね。

コードは以下のような感じです。

```css:緑と黒のチェック
:root {
  --green: #25A27F;
  --black: #271818;
}

.background {
  background-image: conic-gradient(var(--black) 90deg, var(--green) 90deg 180deg, var(--black) 180deg 270deg, var(--green)  270deg);
  background-size: calc(100% / 4.5) calc(100% / 4.5);
  background-repeat: repeat; /* 初期値がrepeatなので書かなくても良い */
  width: 100px; /* 縦横比は 1:1 にする */
  height: 100px;
```

![スクリーンショット 2020-12-05 13.03.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123809/de2c5a41-8264-00e8-e617-63b43f4f8f39.png)



### Step2. 羽織りの形状を作る

羽織りは[Font Awesome](https://fontawesome.com/)のアイコンを用いました。

ただし羽織りアイコンはもちろん、前開きの服のアイコンもなかったため、代わりにTシャツを使用しました。そのため成果物も半袖となっています。

![スクリーンショット 2020-12-05 1.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123809/b2f69d4a-2ba8-4459-6822-c1e1de19182e.png)

これに`position: absolute`で黒い領域を重ねることにより前開きに見えるようにしています。
（襟の丸みのある部分は`border`で作った三角形で作っています）

![スクリーンショット 2020-12-05 1.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123809/29e09a7b-4d40-1929-458b-0f272c22b60b.png)


### Step3. 羽織りを透過させてチェック柄の背景を映す

Font Awesomeアイコンも当然フォントなので、[background-clip: text](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)により透過させ背景を映すことが可能です。

```css
.background {   
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: conic-gradient(var(--black) 90deg, var(--green) 90deg 180deg, var(--black) 180deg 270deg, var(--green)  270deg);
 （以下省略）
}
.fa-tshirt {
  font-size: 6rem;
}
```

```html
<div class="background">
  <i class="fas fa-tshirt fa-5x"></i> 
</div>
```

※ IEは`background-clip`に対応していません。
※ SafariやIPhoneの各ブラウザもアイコンフォントの透過には対応していない？ようです。

# コード 

以上を組み合わせることでCSS羽織（半袖）が完成します。

<p class="codepen" data-height="450" data-theme-id="light" data-default-tab="css,result" data-user="POPOPON" data-slug-hash="JjRGmVd" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JjRGmVd">
  <span>See the Pen <a href="https://codepen.io/POPOPON/pen/JjRGmVd">
  JjRGmVd</a> by Masa-Shin (<a href="https://codepen.io/POPOPON">@POPOPON</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

※ 恐らくSafariやIEからは見えない服となっています。