「CSS」transformプロパティのskew関数で要素に傾斜をつける
書式
transform: skew(横数値, 縦数値);
skew関数を使用して要素に傾斜を付けます。
skewX(数値+単位)とした場合は水平のみの傾斜になります。
skewY(数値+単位)とした場合は垂直のみの傾斜になります。
この数値をマイナスにすると逆方向になります。
使用例
<!DOCTYPE html> <html> <head> <title>要素に傾斜をつけるサンプル</title> </head> <!--skew関数で要素横5deg、縦3degで傾斜--> <style> .trans { transform: skew(5deg, 3deg); border: 1px solid #000; background-color: skyblue; width: 250px; height: 60px; } .cft { border: 1px dotted #000; background-color: yellow; width: 250px; height: 60px; } </style> <body> <div class="cft"> <div class="trans">要素に傾斜をつける</div> </div> </body> </html>
実行結果
skew関数でdiv要素「trans」を横5deg、縦3degで傾斜します。