要素を正方形にするために、幅(width)と高さ(height)を同じにします。rotate(45deg)」と記述します。rotate(-45deg)」で逆方向にrotateで変形させることで、枠をひし形(ダイヤ型)にすることができます。css3によるひし形の実現css3を駆使することで様々な表現が実現できるため、デザインに幅が広がります。今回はcssで要素をひし形(ダイヤ型)にする方法をご紹介します。DEMOはこちら要素をひし形(ダイヤ型)に加工HTMLはこちら要素「クラス:diamond-box」の中に、さらに中を囲う要素「クラス:inner-box」を用意します。class="text">要素をひし形(ダイヤ型)に加工</p></div></div>CSSはこちら要素「クラス:diamond-box」を、要素を正方形にするために、幅(width)と高さ(height)を同じにします。rotate(-45deg)」で-45度変形させます。rotate(-45deg);}ポイント!rotateを掛けた要素の中の要素に、同じ数値の逆の値(足して0になる)でrotateを掛けることで、中の要素は回転していない状態で表示することができます。参考ページ以下のサイトが、より詳しく解説してくれています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。解決策このサイトについて。