【HTML CSS】便利! clip-path

webサイトでよく見るいろんな形のなんやかんや。IllustratorやPhotoshopでクリッピングしなきゃか…。と、思っていました今日この頃。しかし、[ clip-path ]ならクリッピングをcss上でできるのです!

Illustrator、Photoshopの場合。

Illustrator

別のソフトで編集しているため、変更を加える時は最初に編集したソフトでやらなきゃいけない。

Photoshop

 

しかし、[ clip-path ]ならcssのみで上記とほぼ同じことができる!

html css を編集できるソフトを使用すること。

正円 [ clip-path : circle ( px,% ); ]

楕円 [ clip-path : ellipse ( X px, Y % ); ]

四角形 [ clip-path : inset ( Y px, X % ); ]

多角形 [ clip-path : polygon ( px,% ); ]

他にも様々なことができます。いろいろ試して見てください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次