Home
CSS
CSS Masking
Tryit: An SVG mask layer - triangle
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <body> <h1>SVG mask layer</h1> <p>An SVG mask layer (formed as a triangle):</p> <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> <mask id="svgmask1"> <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon> </mask> <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image> </svg> <p>Original image:</p> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </body> </html>
