我怎么能用css弯曲（打破）这样的矩形？

Question

如何使用css弯曲（打破）像这个图像的矩形？

enter image description here

Answer 1

<div class="shape">
  <a href=''>About Us</a>
</div>
<div class="shape green">
  <a href=''>Portfolio</a>
</div>
<div class="shape maroon">
  <a href=''>Clients</a>
</div>
<div class="shape yellow">
  <a href=''>Contact Us</a>
</div>

<style>
.shape:before {
  position: absolute;
  bottom: 30px;
  left: 0;
  content: '';
  height: 90px;
  width: 100%;
  border-bottom: 60px solid red;
  border-right: 80px solid red;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index:2;
}
.green:before {border-color:green !important; bottom:30px;}
.green, .maroon, .yellow {top:-80px; left:20px}
.maroon:before {border-color:maroon !important; bottom:30px;}
.maroon{top:-161px; left:41px}
.yellow:before {border-color:orange !important; bottom:30px;}
.yellow {top:-241px; left:60px}

.shape:after {
  position: absolute;
  content: '';
  bottom: 30px;
  left: 0px;
  height: 90px;
  width: 100%;
  border-bottom: 60px solid red;
  border-right: 80px solid red;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}
.shape {
  position: relative;
  height:80px;
  padding-top:60px;
  width: 400px;
  z-index:9;
}
.shape a {
  position: absolute;
  height:80px;
  padding:0 0 0 35px;
  font-family:'Arial Narrow', Tahoma;
  width: 400px;
  z-index:9;
  font-size:35px;
  color:#fff;
  text-decoration:none;
}
</style>