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. 分解してみる
❶.
まずは、いつもの通り、マークアップです。
<!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>
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つの画像を置いていきましょう。
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つの境界に斜め線を入れてみます。
.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 の境界は斜めになるんでした。
こちら の記事に詳しくのっておりますので、ご参照ください。
では早速、このアイデアを使っていきましょう。
.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 で、黒い内向きの境界を作ります。
.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の色を透明にしましょう。
.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メソッドで調整します。
.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 を実装します。
それでは、また明日〜