Achieve irregular rectangular shape image masking using SVG - HTML CSS SVG

HTML CSS examples for SVG:polygon

  1. HOME
  2. HTML CSS
  3. SVG
  4. polygon

Description

Achieve irregular rectangular shape image masking using SVG

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
polygon {<!--  ww w  .jav  a2s .com-->
   opacity:0.4;
   transition:all 0.5s;
}
polygon:hover {
   opacity:1;
}

      </style> 
   </head> 
   <body> 
      <svg width="500" height="300" viewbox="0 0 500 300"> 
         <defs> 
            <pattern id="img1" patternunits="userSpaceOnUse" width="600" height="300"> 
               <image xlink:href="http://java2s.com/resources/h.png" x="0" y="0" width="600" height="300" /> 
            </pattern> 
            <pattern id="img2" patternunits="userSpaceOnUse" width="600" height="300"> 
               <image xlink:href="http://java2s.com/resources/f.png" x="0" y="0" width="600" height="300" /> 
            </pattern> 
         </defs> 
         <polygon id="top" points="0,20 500,0 500,170 0,130" fill="url(#img1)" /> 
         <polygon id="bottom" points="0,130 500,170 500,280 0,300" fill="url(#img2)" /> 
      </svg>  
   </body>
</html>

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
   <polygon points="55,5 155,5 205,92 155,179, 55,179 5,92 55,5" style="fill:red;stroke:black;stroke-width:5" /> 
  </svg>  <!--from   w  w w.j  av a  2s.co m-->
 </body>
</html>

Related Tutorials