Bevel on one side of an element only

Question

I am attached to get a result like this image:

I tried:

#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 as an image: the first parallelogram is not crossed on the left side, and the last parallelogram is not crossed on the right side.

Can anybody help me?

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

Answer 2

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

From this point on, you can, of course, customize everything, but this is only 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>