How to display posts in shape using css or jquery?

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):