web-dev-qa-db-fra.com

Incliner un seul côté d'un élément

Je m'attache pour obtenir un résultat comme cette image:  enter image description here

J'ai essayé ça:

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

Je ne peux pas réaliser cela comme dans l’image: le premier parallélogramme n’a pas été projeté du côté gauche et le dernier parallélogramme n’a pas été traité du côté droit. 

Quelqu'un peut m'aider s'il vous plaît?

csstransformskew
6
user3405644

Voir extrait  

   

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

11
Ayatullah Rahmani

Vous pouvez également y parvenir simplement avec le code suivant. Dans ce cas, une seule div est nécessaire. 

A partir de là, vous pouvez bien sûr tout ajuster, mais ceci est juste pour vous donner une idée approximative.

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>

1
SvenL