「CSS」transformプロパティのskew関数で要素に傾斜をつける

2022年3月15日

書式
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で傾斜します。

CSS

Posted by arkgame