Web筋トレも使っているサーバー!ロリポップを使ってみない?

斜めのコーディング

Sponser Link

斜めにコンテンツをデザインしたものを
たまに見かけます。
以前LPのコーディングをした時に苦労しました。

今回はコーディング方法を解説していきます。

See the Pen
斜めのLP
by studio-0 (@studio-0)
on CodePen.

Sponser Link

HTML

斜めになるコンテンツ全体をp-top__mvで囲んでいます。

Sponser Link

CSS

コンテンツ下部の斜め部分は.p-top__mv:afterになります。

 

 

これで白い三角形を作っています。

 

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA