Box with diagonal section css - css

Question

I would like to achieve something like in the image
https://www.dropbox.com/s/rhvfaf4bllydl5f/stack1.JPG?dl=0
I use bootstrap also and i have no idea to realize the diagonal section in css.
should i use a background image?
example also available as a fiddle:
https://jsfiddle.net/9xuvacr0/
body {
background-color: #000;
margin: 0px;
}
p {
color: white;
}
.diagonal {
z-index: 1;
padding: 3em;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
background-color:blue;
text-align:center;
width:50%;
}
<header>
<p>Header</p>
</header>
<div class="diagonal">
<p>Lorem ipsum</p>
</div>

Answer 1

hope this help
body{
background-color:#999;
font-family:arial;
}
.cont{
position:relative;
width:300px;
height:350px;
overflow:hidden;
background-color:green;
border-radius:22px;
}
.upper-cont{
position:relative;
width:300px;
height:150px;
background-image: linear-gradient(to right, #8d127c, #711977, #432166 , #132359);
}
.upper-over-top{
position:absolute;
background-color:#fff;
height:70px;
width:400px;
top:-18px;
left:-10px;
transform:rotate(-3deg);
opacity:.1;
}
.upper-text-cont{
position:relative;
padding:20px 20px 0 20px;
max-height:90px;
color:#fff;
}
.upper-text-span{
font-size:12px;
}
.upper-text-head{
text-align:center;
padding-top:30px;
font-size:28px;
}
.upper-over-bottom{
position:absolute;
background-color:#fff;
height:30px;
width:400px;
top:139px;
left:-10px;
transform:rotate(-3deg);
}
.bottom-cont{
position:relative;
width:300px;
height:200px;
background-color:#fff;
}
.bottom-text-cont{
position:relative;
padding:20px 20px 0 20px;
max-height:90px;
color:#333;
text-align:center;
}
<div class="cont">
<div class="upper-cont">
<div class="upper-over-top"></div>
<div class="upper-text-cont">
<div class="upper-text-span">
Lorem Ipsum
</div>
<div class="upper-text-head">
PACCHETTO UNO
</div>
</div>
<div class="upper-over-bottom"></div>
</div>
<div class="bottom-cont">
<div class="bottom-text-cont">
text here
</div>
</div>
</div>