Search code examples
csstransformskew

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 ?

Solution

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