Skew one side only of an element

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>


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>

Tags:

Css

Transform

Skew

Recent Posts