CSS animation day28 となりました。

前回の作品では、肝心の skew があまり出てこなかったので、今度こそ本当に、skew にfocus を置きます。

#1. 完成版

#2. 参考文献
How To Create Modern Morph Animated Slides in PowerPoint 2018
Html Css Angled Div Shape - Slanted / Skewed / Razor-Blade div Shape -
CSS Skewed Background Tutorial - pure css tutorial

#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);
}

では、ここに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;
}

❷.
では、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);
}

うーむ

はみ出してしまい、box-sizing: border-box を適応してもうまくいきませんでした。別のやり方を考えましょう。

❸.
ちょっと話が変わりますが、皆さんは、CSSで三角形を作るにはどうしたら良いか知っておりますでしょうか？

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

こちらの記事に詳しくのっておりますので、ご参照ください。

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

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;
}

まず、右の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;
}

次に、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;
}

いい感じになりました。

長さを均等にするために、以前お伝えした、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;
}

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

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