サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

2つの角が欠けた長方形、実際には六角形と呼ぶべき形状だが、私がウェブサイトの制作で利用したのは、カード(写真とテキストがセットになったブロック)としてだったので、あえて長方形とか四角とか呼ばせてもらう。

これを作るには、まず最初に普通の正方形(または長方形でもいい)を描画して、その上下に「::before」と「::after」で角が1つ欠けた長方形を配置する。

図解するとこう↓

至極シンプル。ただただこれを繋げて見せるだけ。タネが分かれば怖くない。