45度で回転したCSSの正方形を作成する方法

2024-02-09 23:04 CSS回転正方形

方法1: transformプロパティを使用する方法

  1. HTMLの要素を作成します。例えば、div要素を使用します。

    <div class="rotated-square"></div>

  2. CSSスタイルシートで、回転した正方形のスタイルを定義します。

    .rotated-square {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}

  3. 上記のCSSコードを適用すると、45度で回転した赤い正方形が表示されます。

方法2: transformプロパティと::before疑似要素を使用する方法

  1. 同様にHTMLの要素を作成します。

    <div class="rotated-square"></div>

  2. CSSスタイルシートで、回転した正方形のスタイルを定義します。ここでは、::before疑似要素を使用して回転させます。

    .rotated-square {
position: relative;
width: 100px;
height: 100px;
}
.rotated-square::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
}

  3. 上記のCSSコードを適用すると、45度で回転した青い正方形が表示されます。

以上が、CSSを使用して45度で回転した正方形を作成する方法の例です。この方法を利用すれば、ウェブサイトやアプリケーションで独自のデザインを実現することができます。ぜひお試しください！