html - Different shaped divs -

i need create 2 divs in image. both can have background images. 1 can help?

two divs http://development.230i.com/tsips_new/v2/images/untitled.png

there several ways this.

old school

one way crop overlaid image has triangle cut off , replaced transparency. work in browser supported .pngs, however, downside each image you'd need create new crop. photo-shop batch process or server side image processing job on upload cover best, depending on whether have full control on images (photoshop) or dealing user uploaded images (server side processing)

masking

by using css masks create mask overlaying div forced transparency through overlaying div div beneath it. you'd want image triangle cut-out black , rest transparent. black area area retained, while rest of div transparent, revealing div underneath.

this answer here gives a working example, though shape different.

the syntax pretty simple, define -mask-image url works background image. prefixes required , support still a bit limited.

clip path

clip path allows clip overlaying div let div underneath show through. can use this tool set up. i've nicked following css output defines triangle on bottom:

-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%); clip-path: polygon(100% 38%, 42% 100%, 100% 100%); 

in example, overlaying div clipped triangle shape allowing white background show through. again, support limited.

more clip-path , masking.

with examples

it's possible examples swap overlaying div triangle or square corner cut off. makes no difference result.

also, in cases you'd need use position overlay 2 divs on top of each other exactly. this:

.container {     position: relative; } .div1, .div2 {     position: absolute; }