仅偏向元素的一侧

Question

我想要获得这张图片的结果：

我试过了：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div id="parallelogram-container">

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

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

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

</div>

＆＃13;

＆＃13;

＆＃13;

我无法像图像那样实现这一点：第一个平行四边形没有画在他的左侧，而最后一个平行四边形没有画在他的右侧。

有人能帮助我吗？

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>

Answer 2

您也可以使用以下代码完成此操作。在这种情况下，只需要一个div。

从这一点来说，你当然可以微调一切，但这只是为了给你一个粗略的想法。

<强> HTML

<div class="box"></div>

<强> CSS

.box{
  width: 400px;
  height: 100px;
  background: #008dd0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.box:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: #ffa008;
}

.box:before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) skew(-10deg);
  width: 40%;
  height: 100%;
  background: #008dd0;
  border: 2px solid white;
  border-width: 0 8px;
  z-index: 100;
}

.box {
  width: 400px;
  height: 100px;
  background: #008dd0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.box:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: #ffa008;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) skew(-10deg);
  width: 40%;
  height: 100%;
  background: #008dd0;
  border: 2px solid white;
  border-width: 0 8px;
  z-index: 100;
}

<div class="box"></div>