user3405644 user3405644 - 12 days ago 15
CSS Question

Skew one side only of an element

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

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 ?

Answer

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>