What is the best way to have a shape below the main content?

Question

I have a responsive design like on the following images

What is the best way to replicate this shape on the left ? sould i use img ? or should i put it as background images ? or use it as a css shape ?

Answer 1

You can use linear gradients

.box{
width:200px;
height:350px;
background:white;
background: -moz-linear-gradient(125deg, red 30%, white 30%);
background: -webkit-linear-gradient(125deg, red 30%, white 30%);
background: -o-linear-gradient(125deg, red 30%, white 30%);
background: -ms-linear-gradient(125deg, red 30%, white 30%);
background: linear-gradient(125deg, red 30%, white 30%);
border: 1px solid #ccc;
}

<div class="box"></div>