仅偏向元素的一侧

Question

我想要得到这个图像的结果:

我试过了:

#parallelogram-container {
  margin: 0 50px;
}

.parallelogram {
    background: #008dd0;
   width: 200px;
    border: 		none;
    display: 		inline-block;
    height: 		90px;
    -moz-transform: 	scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform: 		scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform-origin: 	50% 50%;
    padding: 		0px;
    margin:             0 1px;
}

.parallelogram:first-child {
    border-bottom-left-radius:      5px;
    border-top-left-radius:      5px;
}

.parallelogram-btn {
  width: 60px;
    background: #ffa008;
    color: 		#FFF;
    border:             none;
    display: 		inline-block;
    height: 		90px;
    -moz-transform: 	scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    -webkit-transform: 	scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform: 		scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    border-bottom-right-radius:      5px;
    border-top-right-radius:      5px;
    transform-origin: 	50% 50%;
    padding: 		0px;
    margin: 		0px;
    font-weight: 	700;
    cursor: 		pointer;
}

<div id="parallelogram-container">

    <div class="parallelogram">&nbsp;</div>

    <div class="parallelogram">&nbsp;</div>

    <a class="parallelogram-btn">&nbsp;</a>

</div>

我不能像图像那样实现这一点:第一个平行四边形没有画在他的左侧,而最后一个平行四边形没有画在他的右侧.

有谁可以帮助我吗 ？

Answer 1

请参阅代码段

   

 #parallelogram-container {
      margin: 0 50px;
    }

    .parallelogram{
      position:relative;
        background: #008dd0;
       width:100px;
        border:none;
        display:inline-block;
        height:90px;
        
        padding:0px;
        margin:0 1px;
    }
    .parallelogram:nth-child(1){
       
      
      }
    .parallelogram:nth-child(2){
        
        transform-origin: bottom left;
        -ms-transform: skew(-28deg,0deg);
        -webkit-transform: skew(-28deg,0deg);
        transform: skew(-28deg,0deg);
          margin-left:1px;
    }
    .parallelogram:nth-child(1):after {
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background:#008dd0;
        transform-origin:bottom left;
        -ms-transform: skew(-28deg,0deg);
        -webkit-transform: skew(-28deg,0deg);
        transform: skew(-28deg,0deg);
    }
    .parallelogram-btn:before {
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        left: -51px;
        z-index: -1;
        background: #ffa008;
        transform-origin: bottom left;
        -ms-transform: skew(-28deg,0deg);
        -webkit-transform: skew(-28deg,0deg);
        transform: skew(-28deg,0deg);
    }

    .parallelogram:first-child {
        border-bottom-left-radius:5px;
        border-top-left-radius: 5px;
    }

    .parallelogram-btn {
      width: 60px;
      position:relative;
        background:#ffa008;
        color:#FFF;
        border: none;
        display:inline-block;
        height:90px;
        
        border-bottom-right-radius:5px;
        border-top-right-radius:5px;
        padding:0px;
        margin-left:51px;
        font-weight:700;
        cursor:pointer;
    }

   

   

<div id="parallelogram-container">

    <div class="parallelogram">&nbsp;</div>

    <div class="parallelogram">&nbsp;</div>

    <a class="parallelogram-btn">&nbsp;</a>

</div>