CSS
単一要素シェイプ

平方

四角形を作成するには、幅と高さの両方で要素を定義します。下の例では、 widthとheightがそれぞれ100ピクセルの要素があります。

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

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

三角形

CSSの三角形を作成するには、幅と高さが0ピクセルの要素を定義します。境界線のプロパティを使用して三角形が形成されます。高さと幅が0の要素の場合、4つのボーダー（上、右、下、左）はそれぞれ三角形を形成します。ここには高さ/幅が0の要素と色のついた4つの枠があります。

いくつかの境界線を透明に、他の境界線を色に設定することによって、さまざまな三角形を作成できます。たとえば、上三角では、下の境界を目的の色に設定し、左右の境界を透明に設定します。ここでは、三角形がどのように形成されているかを示すために、左と右の境界線が少し陰影をつけた画像を示します。

三角形の大きさは、異なる境界線の幅を変更することによって変更できます - 背の高いもの、短いもの、片面のものなど。以下の例はすべて50x50ピクセルの三角形を示しています。

三角形 - ポインティングアップ

<div class="triangle-up"></div>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

三角形 - 下を指す

<div class="triangle-down"></div>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

三角形 - 右を指す

<div class="triangle-right"></div>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

三角形 - 左を指す

<div class="triangle-left"></div>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

三角形 - 上向き/右向き

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

三角形 - 上向き/左向き

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

三角形 - 下/右を指示する

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

三角形 - 下/左を指す

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

バースト

バーストは星に似ていますが、ポイントは体から離れています。バーストの形を正方形にして、少し回転した追加の正方形が上に重なっていると考えてください。

追加の四角形は、 ::beforeおよび::after擬似要素を使用して作成されます。

8ポイントバースト

8点バーストは、2つの層状の正方形である。下の四角形は要素自体であり、追加の四角形は:before擬似要素を使用して作成されます。底部を20°回転させ、上部の正方形を135°回転させます。

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12ポイントバースト

12ポイントバーストは3つのレイヤードスクエアです。下の四角形は要素自体であり、追加の四角形は:beforeと:after擬似要素を使用して作成されます。底部を0°回転させ、次の正方形を30°回転させ、上部を60°回転させます。

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

円と楕円

サークル

円を作成するには、 widthとheight等しい要素（ 四角形 ）を定義し、この要素のborder-radiusプロパティを50%ます。

HTML

<div class="circle"></div>

CSS

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

楕円

楕円は円に似ていますが、 widthとheight値が異なります。

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

台形

台形は、高さゼロ（高さ0px ）、幅がゼロより大きく、一辺を除いて透明であるブロック要素で作ることができます：

HTML：

<div class="trapezoid"></div>

CSS：

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

ボーダーサイドを変更することで、台形の向きを調整することができます。

キューブ

この例は、擬似要素に対して2D変換メソッドskewX()およびskewY()を使用してキューブを作成する方法を示しています。

HTML：

<div class="cube"></div>

CSS：

.cube {
  background: #dc2e2e;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 100px;
  height: 20px;
  transform: skewX(-40deg);
  position: absolute;
  top: -20px;
  left: 8px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 16px;
  height: 100px;
  transform: skewY(-50deg);
  position: absolute;
  top: -10px;
  left: 100%;
}

デモを見る

ピラミッド

この例は、擬似要素に対して境界線と2D変換メソッドskewY()とrotate()を使用してピラミッドを作成する方法を示しています。

HTML：

<div class="pyramid"></div>

CSS：

.pyramid {
  width: 100px;
  height: 200px;
  position: relative;
  margin: 50px;
}

.pyramid::before,.pyramid::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 50px solid;
  position: absolute;
}

.pyramid::before {
  border-color: transparent transparent #ff5656 transparent;
  transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
  border-color: transparent transparent #d64444 transparent;
  transform: scaleY(2) skewY(40deg) rotate(-45deg);
}