Different shaped divs [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to create two divs like in image. both can have background images. Any one can help?
Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png

Answer 1

There are several ways to do this.
Old School
One way would be to crop the overlaid image so that it has a triangle cut off and replaced by transparency. This would work in any browser that supported .pngs, however, the downside would be that for each image you'd need to create a new crop. A photo-shop batch process or server side image processing job on upload would cover this best, depending on whether you have full control over the images (photoshop) or are dealing with user uploaded images (server side processing)
Masking
By using css masks you could create a mask for the overlaying div that forced transparency through the overlaying div to the div beneath it. You'd want an image where the triangle cut-out is black and the rest transparent. The black area is the area that is retained, while the rest of the div is transparent, revealing the div underneath.
This answer here gives a working example, though the shape is different.
The syntax is pretty simple, you just define a -mask-image with a url that works like a background image. Prefixes are required and support is still a bit limited.
Clip Path
Clip path allows you to clip the overlaying div to let a div underneath show through. You can use this tool to set it up. I've nicked the following css from their output that defines a triangle on the bottom:
-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
In this example, the overlaying div is clipped to the triangle shape allowing the white background to show through. Again, support is limited.
More about clip-path and masking.
With all examples
It's possible with all examples to swap the overlaying div to be the triangle or the square with a corner cut off. It makes no difference to the result.
Also, in all cases you'd need to use position to overlay the two divs on top of each other exactly. Like this:
.container {
position: relative;
}
.div1,
.div2 {
position: absolute;
}