💠

【CSS】linear-gradientとclip-pathを使ってみた

に公開
CSS
tech

linear-gradientを使って、格子状の背景を作ってみました

https://codepen.io/mdvlzqqm-the-lessful/pen/MWRxGvV

CSSの解説

  • width: 300px;
    幅を設定したい背景の横幅にします

  • height: 300px;
    高さを設定したい背景の縦幅にします

  • background: linear-gradient(0deg, transparent 54px, red 55px), linear-gradient(90deg, pink 54px, blue 55px);
    2つの線形グラデーションを設定します
    最初のグラデーション (linear-gradient(0deg, transparent 54px, red 55px)):
    0deg: 上から下（縦方向）にグラデーションが適用される
    transparent 54px: 上から54ピクセルまでは透明
    red 55px: 55ピクセル目から赤
    これにより、1ピクセル幅の赤い線が縦方向に55ピクセルごとに現れます！
    2つ目のグラデーション (linear-gradient(90deg, #fff0f7 54px, blue 55px)):
    90deg: 左から右（横方向）にグラデーションが適用されます
    pink 54px: 左から54ピクセルまではピンクです。
    blue 55px: 55ピクセル目から青になります。
    これにより、1ピクセル幅の青い線が横方向に55ピクセルごとに現れます。

clip-pathを使って、格子状の星型を作ってみた

さっき作った格子状の四角のCSSに
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
をたすと、格子状の星型が作れる！かわいい。。

clip-pathは三角形を作ったりする時にとても便利！
三角を作るくらいならすぐできるけど、星型とか変わった形を作るなら、clip-path makerを使うのもよいです！
https://bennettfeely.com/clippy/

まとめ

格子状の星型はなかなか実装で使う機会はないかもしれませんが、linear-gradientやclip-pathは使う機会があるとおもうのでいつでも使えるようにしておきたいと思います！

Discussion