斜截面CSS的盒子

Question

我想实现图像中的类似效果 https://www.dropbox.com/s/rhvfaf4bllydl5f/stack1.JPG?dl=0

我也使用bootstrap并且我不知道在CSS中实现对角线部分。 我应该使用背景图片吗？

示例也可以用作小提琴： 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

希望获得帮助

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>