CSSシェイプ入門：正方形からハートまで図形を自由に描く方法

それでは、楽しいCSSシェイプを作っていきましょう！すべてのコードは私のCodepenで確認できます。さっそく始めましょう。

長方形と正方形

すべての図形はdiv要素で囲みます。最も基本的な図形は正方形と長方形です。divはデフォルトで、widthとheightプロパティの値に応じて正方形や長方形として表示されるためです。正方形は幅と高さが等しく、長方形は等しくありません。

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

ポイント：ここではremという単位を使用しています。remはルートのフォントサイズを基準とするため、簡単に拡大縮小できます。ブラウザのデフォルトは通常16pxです。この例ではfont-sizeを20pxに設定しているので、2remは40pxになります。

円

次に、プロフィール画像用の円を作成します。円の作り方は正方形とほぼ同じですが、border-radiusを指定する必要があります。角を完全に丸めるには50%に設定します。楕円にしたい場合は、長方形と同じ要領でwidthとheightの値を調整します。

プロフィール画像を作ってみましょう。

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

メモ：background関連のプロパティは、画像の読み込み、サイズの調整、中央への配置に使用しています。

平行四辺形

平行四辺形も作成できます。この図形は、おしゃれなテキスト効果を加えたいときに便利です。ここではtransformプロパティのskew値を使用し、図形（およびその中の要素）を20度または-20度に傾けて平行四辺形に変形します。

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

なかなかかっこいいですね 😎

その他の図形

CSSシェイプの基礎とその活用方法がわかったところで、他の図形にも挑戦してみましょう。紹介する図形はすべて私のCodepenで実際に試すことができます。

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

ハートの作り方は数多くあり、ネット上でもさまざまな実装例が見つかりますが、ここで紹介する方法はかなりシンプルです。

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

パーセンテージの値をいじったり色を変えたりしながら、ハートがどのように組み立てられているのか観察してみてください。::beforeや::afterといった疑似要素を活用することで、クールな図形を作れることがわかります。

さらに、polygon()関数を使えば、より複雑な図形も指定でき、表現の幅が大きく広がります。

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

clip-pathメーカーもぜひチェックしてみてください。さまざまな図形のコードを自動生成してくれる便利なツールです！