CSS animation で遊び倒す - Skew image -

CSS animation day28 となりました。

[前回](https://qiita.com/duka/items/88289a7de015ec9c1fcb) の作品では、肝心の skew があまり出てこなかったので、今度こそ本当に、skew にfocus を置きます。



#1. 完成版

<img width="984" alt="スクリーンショット 2019-02-18 10.16.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/38ca194d-2431-e60d-617d-83e7d18cfb3e.png">


#2. 参考文献
[How To Create Modern Morph Animated Slides in PowerPoint 2018](https://www.youtube.com/watch?v=3wtwVE5injI)
[Html Css Angled Div Shape - Slanted / Skewed / Razor-Blade div Shape -](https://www.youtube.com/watch?v=A11xEtSNDr8)
[CSS Skewed Background Tutorial - pure css tutorial](https://www.youtube.com/watch?v=v2Jw9pa6sFo)

#3. 分解してみる

❶. 

まずは、いつもの通り、マークアップです。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
      <div class="image"></div>
    </div>
  </body>
</html>
```

```styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(#43cea2, #185a9d);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 50%;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
}
```

<img width="988" alt="スクリーンショット 2019-02-18 9.17.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/ab0c5a50-cc9a-082b-44c4-08da4b569c01.png">



では、ここに2つの画像を置いていきましょう。

```styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(0deg, #43cea2, #185a9d);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
  display: flex;
}

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
}
```

<img width="982" alt="スクリーンショット 2019-02-18 9.15.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/9dcd81e2-dfe3-fc4b-8821-472165418747.png">


❷.
では、skew で2つの境界に斜め線を入れてみます。

```styles.scss


.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  transform: skew(10deg, 0deg);
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  z-index: 3;
  transform: skew(10deg, 0deg);
}
```
<img width="949" alt="スクリーンショット 2019-02-18 9.25.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/5d861ce4-b578-923e-935d-2a8c508b75f0.png">

うーむ

はみ出してしまい、box-sizing: border-box を適応してもうまくいきませんでした。別のやり方を考えましょう。
<br/>
❸.
ちょっと話が変わりますが、皆さんは、CSSで三角形を作るにはどうしたら良いか知っておりますでしょうか？

そうです、border プロパティを駆使するんでしたね。
border とborder の境界は斜めになるんでした。

[こちら](https://liginc.co.jp/web/html-css/html/164641) の記事に詳しくのっておりますので、ご参照ください。

では早速、このアイデアを使っていきましょう。

```styles.scss

.container {
  width: 80%;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
  display: flex;
}

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid yellow;
  box-sizing: border-box;
}
```

<img width="866" alt="スクリーンショット 2019-02-18 9.43.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/9e28c3ca-e64f-3123-e560-3ba37e54f08d.png">

まず、右のimage クラスに、border-left で、黒い内向きの境界を作ります。

```styles.scss
.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid #000;
  border-bottom: 400px solid #185a9d;
  box-sizing: border-box;
}
```
<img width="882" alt="スクリーンショット 2019-02-18 10.00.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/203ea304-5431-7f41-fb92-72c4929d1aa4.png">

次に、border-bottomを設定しました。
ご覧の通り、境界が斜めになっております。

では、黒の境界を、左のcontentクラスと同じ色にし、border-bottomの色を透明にしましょう。

```styles.scss

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid #ded46e;
  border-bottom: 400px solid transparent;
  box-sizing: border-box;
}
```

<img width="901" alt="スクリーンショット 2019-02-18 10.02.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/4fe2871c-59b2-e7da-474c-9ed5525e311e.png">

いい感じになりました。

長さを均等にするために、[以前](https://qiita.com/duka/items/108f5a32181920ae2972) お伝えした、calcメソッドで調整します。

```styles.scss
.content {
  width: calc(50% - 50px);
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: calc(50% + 50px);
  height: 100%;
  background: #003833;
  border-left: 100px solid #ded46e;
  border-bottom: 400px solid transparent;
  box-sizing: border-box;
}
```

<img width="984" alt="スクリーンショット 2019-02-18 10.16.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/c9708ae6-7049-f137-0f22-eb53a047be43.png">


できました！
素敵なデザインですね。

明日は、今度こそ本当に、skew animation を実装します。
それでは、また明日〜