how to slice an image in css

Question

I want to slice images in my html document using CSS.

Here is how I want to slice the image. I've masked it with red color:

 <div class="img_section" > <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" > </div> 

I don't want to use a mask layer to hide the image, because the background of document is not a solid color. I used border-radius property to do it but I couldn't. If it's not possible with CSS , so isn't it possible with js too?

Answer 1

You could do this using svg 's clipPath to clip the image and foreignObject to import the html within svg , since you could only apply svg clipPath to a svg element.

 <svg width="445" height="257"> <clipPath id="clip"> <path d="M0,0 h444 l-130,257 h-314z" /> </clipPath> <foreignObject clip-path="url(#clip)" width="445" height="257"> <div class="img_section"> <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" /> </div> </foreignObject> </svg> 

Answer 2

You can do that with CSS layer max, I wrote an example to create what you want, overlayed with black mask.

HTML Code:

<div class="img_section" >
  <img src="http://i62.tinypic.com/1zbcqhg.jpg"  alt="sliced-image" >
  <div class="image-arrow"></div>
</div>

CSS:

.img_section{
    width:445;
    height:257px;
    position:absolute;
}
.image-arrow{
    width: 0;
    height: 0;
    border-bottom: 257px solid black;
    border-left: 130px solid transparent;
    position:absolute;
    right: 0;
    bottom: 0;
}

Answer 3

There is no such way in CSS to slice the images this can only be done in LESS and SASS but you can use multiple images as a sprite (single image multiple icon)

Check this out

Answer 4

I'm not certain, but I think you may be looking for clip-path : https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Browser support is rather patchy (as of July 2015), however. http://caniuse.com/#search=clip-path