やりたいこと
今回やりたいことは、以下の画像のような四角形の変形した図を作成することです。
これをHTMLとCSSで作成します。
考え方
三角形＋四角形を組み合わせて作成してみようかなと思います。
三角形を作成
さっそく三角形を作成します！
以下のコードのように clip-path を利用して作成しました！
See the Pen triangle by 藤野美優 (@lgexfaug-the-sasster) on CodePen.
clip-path ってそもそも何？
clip-path とは
要素や画像をクリッピングして（切り抜いて）表示させることが出来ます。
clip-path:polygon()とは
polygon() に3つの頂点の座標を指定して三角形のパスを定義できます。
今回は以下のように定義しています。
clip-pathでできること
今回は三角形を作成をclip-path:polygon()で作成しましたが、clip-pathには他にも多角形や円、様々な図を作成できるので、使いこなしたら幅広く利用できそうです。
四角形を作成
残りの下の四角形を作成します。
これは高さと横幅を決めて色つけて終わりです。
See the Pen Untitled by 藤野美優 (@lgexfaug-the-sasster) on CodePen.
三角形と四角形を組み合わせて完成！
See the Pen triangle＋square＋ by 藤野美優 (@lgexfaug-the-sasster) on CodePen.
最後に
以上となります！
他に簡単な作成方法とか、適したものがあったら是非教えていただきたいです、、！！