I want to display two posts in this format. I don't know how to do that. I tried using CSS but got confused. I can create these shapes using following CSS method. But I don't know how to insert images and text in these shapes. <div id="fbig-posts-carsl"> asdasd </div><divid="sbig-posts-carsl"> asdasd </div> #fbig-posts-carsl { border-top: 300px solid red; border-left: 0px solid transparent; border-right: 100px solid transparent; height: 0; width: 50%; float:left; position:absolute; } #sbig-posts-carsl{ border-bottom: 300px solid #333; border-left: 100px solid transparent; border-right: 0px solid transparent; height: 0; width: 50%; float:right; }
Well... while inserting text and images in the container isn't very hard (just basically replace what you have in the html - the asdasd-text with whatever you want to place there), you can't put images or text on borders - hence the /-part of the construct won't have text or images on it. To accomplish that you would have to have quite a bit of overlapping content-divs and such, methinks. Not entirely sure as to how you would do that, but I think it can be done by having overlapping/z-index placed divs on top of each other. Hence you'd need a bottom container, then a first container with the image/background color of the one you want "on the bottom", then an overlapping container with the cut-off point, and and and... not entirely sure it will be possible to do exactly as you want if you want full-size images on both sides.
Try this one <style> #fbig-posts-carsl { border-top: 300px solid red; border-left: 0px solid transparent; border-right: 100px solid transparent; height: 0; width: 50%; float:left; position:absolute; } #sbig-posts-carsl{ border-bottom: 300px solid #333; border-left: 100px solid transparent; border-right: 0px solid transparent; height: 0; width: 50%; float:right; position: relative; } #fbig-posts-carsl div{ position:absolute; top:-100px; left:100px; } #sbig-posts-carsl div{ position: absolute; left: 100px; color: #fff; top: 200px; } </style> <div id="fbig-posts-carsl"> <div>asdasd</div> </div><div id="sbig-posts-carsl"> <div>asdasd</div> </div> Code (markup):
That's awesome! Its working. Now I have one problem with image. I want to add images in these shapes. So I tried this: border-image: url('/images/18.jpg') 100% 0% 0% 0%; But images are looks like stretched. Is there any way to display them properly to fit in these shapes? Thank You
try this again <style> #fbig-posts-carsl { border-top: 300px solid red; border-left: 0px solid transparent; border-right: 100px solid transparent; height: 0; width: 50%; float: left; position: absolute; border-image: url('http://www.w3schools.com/cssref/border.png')30 round; border-image-width: 10px; background-color: red; } #sbig-posts-carsl{ border-bottom: 300px solid #333; border-left: 100px solid transparent; border-right: 0px solid transparent; height: 0; width: 50%; float:right; position: relative; } #fbig-posts-carsl div{ position:absolute; top:-100px; left:100px; } #sbig-posts-carsl div{ position: absolute; left: 100px; color: #fff; top: 200px; } </style> <div id="fbig-posts-carsl"> <div>asdasd</div> </div><div id="sbig-posts-carsl"> <div>asdasd</div> </div> Code (markup):