transform:rotate で菱形を作る

0
2121
views

CSS3 の transform プロパティを使うと簡単に菱形(ひし形)を作ることができます。

正方形を作る

まず菱形の元となる正方形を作ります。

html

CSS

.diamond {
    width: 100px;
    height: 100px;
    background: blue;
}

表示例

transform:rotate で回転させる

diamond クラス属性に次のプロパティを追記します。

CSS への追記

transform: rotate(45deg);

transform は要素に変形を加えるプロパティです。値に rotate を指定すると要素に回転を加えます。

rotate の引数に指定する deg の数値は回転角度を表します。45deg の場合は45度の回転を表します。つまり、deg は degrees(~度)の略です。

表示例