CSSだけで台形を作る

サンプルはこちら。

See the Pen isLdJ by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

一つのタグにCSSだけで台形を作っています。

CSS

.daikei {
  height: 0;
  width: 150px;
  border-bottom: 100px solid #999;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

CSSだけで三角形を作る時もそうなのですが、CSSだけで図形を作る時は主にborderを使います。

まずborder-bottomで基本形の高さと色を色を設定します。
次に左右borderを設定するのですが、transparentを設定することで斜めに透明に削られます。