More than 3 years have passed since last update.

LPお悩み→解決によくある矢印みたいな五角形をcssで作ってみる

Last updated at 2021-02-27Posted at 2021-02-27

LPデザインでよくあるこんなの

画像を作って貼ってもいいんだけど、cssで超簡単にできたのでメモ。

使用するのは clip-path

clip-pathとは
クリッピングが自在にできるプロパティです

詳しい説明は下部の参考になる記事やMDNの公式をご覧いただいて…

とりあえずコードだけ。

code

  clip-path: polygon(0 0,100% 0, 100% 70%, 50% 100%,0 70%);

##ポイント
作りたい多角形の左上から順に頂点の座標を指定していく。
座標の指定の仕方は(x軸 y軸, x y, x y…)と、x yの順番で指定する。

たとえば、普通の長方形だと…

code

  clip-path: polygon(0 0,100% 0, 100% 100%,0 100%);

になりますね。
図にするとこう。普通の長方形にこんな指定はしませんが。笑

そして今回の例だとこんな感じ

③と⑤の70%のほうを変えればもっといろんな角度に対応できます。

#参考になる記事・書籍