CSSで背景を斜めにしたい

この記事はImaizumi Lab Advent Calendarの11日目です。

はじめに

斜め背景の例

画像のように背景を斜めにしたい時に使えるライブラリの紹介です。なるべく面倒なコードは書かずに楽をしたいですよね。

Angled Edgesというライブラリを使うことで簡単に実現することができます。

github.com

使い方

css(またはscss)をソースに放り込んで、sectionタグやdivタグにクラスを指定します。それだけでOKです。

<section class="angle--both-left-left" id="Projects">
        <h1 class="section__title--projects">Projects</h1>
        <h2>These are my projects.</h2>
</section>

これが先程の画像のコードです。

nigelotoole.github.io

こちらのサイトで使用例を詳しく見ることができますので、参考にしてみてください。