CSS3とHTML5で不規則な形状のdivを作成する方法を徹底解説

CSS3を活用すれば、長方形や三角形など、さまざまな図形をHTMLのdiv要素だけで簡単に作成できます。画像を使用せずにCSSのみで図形を描けるため、ページの読み込み速度向上やメンテナンス性の面でもメリットがあります。

ここでは、代表的な図形の作り方をコード例とともにわかりやすく解説します。

長方形を作成する

最も基本となるのが長方形です。widthとheightでサイズを指定し、backgroundで背景色を設定するだけで完成します。

#shape1 {
    width: 300px;
    height: 150px;
    background: blue;
}

三角形を作成する

三角形は、CSSのborder（境界線）の特性を利用して作成します。要素のwidthとheightを0にし、透明な左ボーダーと色付きの下ボーダーを組み合わせることで、三角形として表示されます。

#shape2 {
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-bottom: 200px solid blue;
}

三角形が描かれる仕組み

CSSのボーダーは、隣り合う辺同士が斜めに接合されるという特性を持っています。この特性を利用し、一方向のボーダーだけに色を付けて残りを透明にすると、色を付けた部分が三角形のように見えるのです。ボーダーの幅を調整すれば、二等辺三角形や直角三角形など、さまざまな形に変化させられます。

応用：円形を作成する

border-radiusプロパティを使えば、正方形から円形も簡単に作成できます。

#shape3 {
    width: 150px;
    height: 150px;
    background: blue;
    border-radius: 50%;
}

まとめ

CSS3では、width・height・border・border-radiusといった基本プロパティを組み合わせるだけで、多彩な図形を表現できます。まずは長方形と三角形の基本をマスターし、ボーダーの仕組みを理解することで、より複雑な不規則な形状にも挑戦してみてください。