こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WEBサイトを作成していると様々な形状の要素を作成することになりますよね。画像として作成してしまえば簡単ですWEBサイトを作成する際には、様々な形状の要素をデザインすることが求められます。これらの要素を画像として取り扱う方法もありますが、その場合にはいくつかのデメリットが存在します。例えば、色や形状の変更を行う際には、追加の時間と労力が必要となります。さらに、画像としてのファイルサイズが大きくなるため、多用するとページの表示速度に悪影響を及ぼす可能性があります。

そういった理由から、HTMLとCSSで再現可能な要素に関しては、できるだけHTMLとCSSのみを使用して作成する方針を取りたいと考えています。

今回の記事では、HTMLとCSSだけで作成できる図形についてご紹介します。サンプルソースにHTMLの記載がない場合、下記の基本的なHTML構造を前提としています。

<div class="box"></div>

正方形

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 150px;
  background: #dc5a45;
}

長方形

縦長

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 300px;
  background: #dc5a45;
}

横長

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 300px;
  height: 150px;
  background: #dc5a45;
}

台形

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 100px;
  height: 0;
  border-bottom: 100px solid #dc5a45;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

平行四辺形

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 100px;
  background: #dc5a45;
  transform: skewX(-45deg);
  margin: auto;
}

円

正円

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 150px;
  background: #dc5a45;
  border-radius: 50%;
}

楕円

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 250px;
  height: 150px;
  background: #dc5a45;
  border-radius: 50%;
}

半円（上向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 75px;
  background: #dc5a45;
  border-radius: 150px 150px 0 0;
}

半円（右向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 75px;
  height: 150px;
  background: #dc5a45;
  border-radius: 0 150px 150px 0;
}

半円（下向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 150px;
  height: 75px;
  background: #dc5a45;
  border-radius: 0 0 150px 150px;
}

半円（左向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 75px;
  height: 150px;
  background: #dc5a45;
  border-radius: 150px 0 0 150px;
}

三角形

三角形（上向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width:0;
  height:0;
  border-bottom:100px solid #dc5a45;
  border-left:100px solid transparent;
  border-right:100px solid transparent;
}

三角形（ 右向き ）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 0;
  height:0;
  border-left: 100px solid #dc5a45;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

三角形（下向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 0;
  height:0;
  border-top: 100px solid #dc5a45;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

三角形（左向き）

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

.box{
  width: 0;
  height:0;
  border-right: 100px solid #dc5a45;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}