Skew one side only of an element

问题

I'm tying to get a result as this image :

I tried that :

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

I cannot achieve this like the image : first parallelogram not skrewed on his left side and last parallelogram not skrewed on his right side.

Can someone help me please ?

回答1:

See Snippet

   

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

回答2:

You can also achieve this simply with the following code. In this case only one div is needed.

From this point you can of course fine tune everything but this is just to give you a rough idea.

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>

来源：https://stackoverflow.com/questions/40803277/skew-one-side-only-of-an-element

标签

css

transform

skew