Quelle est la meilleure façon d'avoir une forme en dessous du contenu principal?

Question

J'ai un responsive design comme sur les images suivantes

Quelle est la meilleure façon de reproduire cette forme sur la gauche? Devrais-je utiliser img? ou devrais-je le mettre comme background images? ou l'utiliser comme une forme de CSS?

Answer 1

Vous pouvez utiliser des gradients linéaires

.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>