Clip Path

Clip Path is a free browser-based tool. Supported files are processed locally whenever possible, with no installation required.

🖼️ preview
CLIP
ホバーで変形 外枠表示 グラデ photo Text Solid color
✏️ ビジュアル編集 グリッドにスナップ
頂点をドラッグ／+ボタンで追加
🔷 形状タイプ
⭐ プリセット形状
📋 CSS code
CSS — clip-path 

        


        

          

            SVG — <clipPath> 互換
            
          

          

        

      


      
      

        

          🕒 履歴
          
          
        

        

          
No history yet

        

      


    

  


  
  

    
📚 clip-path とは

    

      要素の表示領域を任意の図形で切り抜く CSS プロパティ。polygon() は頂点の集合、circle(r at cx cy) は円、ellipse(rx ry at cx cy) は楕円、inset(top right bottom left round r) は四角形＋角丸を表す。値は % または px。
      Safari は -webkit- プレフィックスが必要な場面があるが、現行版は不要。古いブラウザ向けには SVG <clipPath> を併用する。
      ホバーアニメーションは transition: clip-path を当てるだけで動く（同シェイプ＆同頂点数の場合）。
    

  



Copied