Skew one side only of an element

Question

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 ?

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

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

Comments

[KCarnaille]

Nice one dude.. !

[user3405644]

Just awesome ! Thank you very much !

[stkmedia]

that is really really nice