斜めにした要素を横並びで配置する機会があったので、CSS3のtransform:rotateで斜めにしたり、平行四辺形に画像をトリミングした備忘録です。 まずは、要素を斜めにしてみます。 斜めにするには transform:skew(X軸,Y軸); を使います。 単位は”deg”です。 ■html <div id="slanting01"><a href="#"></a></div> ■CSS #slanting01{ width:30%; height:100px; background:#FF7373; margin:0 auto; text-align:center; transform:skew(15deg,15deg); } DEMO この場合、上下左右が15°の斜めになります。 X軸もY軸も斜めにすると思ってた以上に要素に高さが出ました。 ここからは平行四辺形です。 今回は上下
![CSS3のtransformで要素を斜めにしたり平行四辺形に画像をトリミング|大阪・東京のWeb制作会社 | 株式会社クリエイティブ・ウェブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/6dffb2179bf70723bfb6e27bd937915aea83a3df/height=288;version=1;width=512/https%3A%2F%2Fwww.creative-web.co.jp%2Fcommon%2Fmedia%2F2017%2F08%2F20170901-1024x658.jpg)