ウェブデザインで各セクションの区切りを斜めにしてみたいと思う

事がよくある。

最近のサイトの流行りで画像なり、背景をブラウザ幅いっぱいにすることは良くあるがそれをすると大体サイトって似るのよね。

そこでなんか個性ということで各セクションの色の変わり方を斜めにする方法。

といってもそんなに難しくないけど。

ソース的にもオススメ出来ないけど。

一個斜め用のdivをおいてそれに高さを指定して

background: linear-gradient(to bottom right, #colorcode50%, #colorcode 50%);

とするとブラウザの幅に合わせて斜めがウニウニ調整されてピッタリになる。レスポンシブ対応といえる?かな。

これに気付く前はtriangeを作ってわざわざJsで幅認識してそれをCSSで上書きしてた。

コメントを残す

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