🕌

clip-pathを使って簡単なバナーを作る

2022/12/22に公開

clip-pathって?

CSSには複雑な図形を作るためのプロパティがあります。
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

何も設定しなければデフォルトは四角形のままですが、表示領域をクリッピングすることができます。例えば、今回のように台形を作る場合は四隅の表示領域を指定してあげると簡単に台形が作れます。

なぜバナーなの?

つい先日まで盛り上がっていたカタールW杯のあるサイトのバナー表示がなかなか面白い形で実装されていたのが興味深かったからです。
透過pngで一部模様を描き、その上からbackground-colorでレイヤーを重ねておしゃれなバナーを表現していました。

どういう形で実装するか

clip-pathで台形を描き、backgroundにグラデーションと背景画像を設定してみます。
徐々に模様が出るように透明度もグラデーションに含めます。

<div
  style={{
    width: "98vw",
    maxWidth: MAX_WIDTH,
    height: 30,
    background: `linear-gradient(to right, #000000cc, #c7c7c755 80%), 
                  url(/images/23242884.jpg)`,
    clipPath: "polygon(0% 100%, 0% 0%, 100% 0%, 95% 100%)",
    color: "white",
    padding: "2px 4px",
    backgroundSize: "cover",
  }}
>
  {elm.name}
</div>

完成形。
背景に何も設定しないより味が出ますね!

参考

  • clip-pathでの台形の描き方

https://1-notes.com/css-shape-trapezoid-design/

  • 使わせていただいた素材

https://www.ac-illust.com/main/detail.php?id=23242884&word=CvHwsSYt

  • 個人開発しているwebサービス

https://cap-baseball.com

Discussion