boîte avec inclinaison et image de fond

Question

L'image que je veux mettre à l'intérieur des boîtes est biaisée de la même manière que les boîtes. Je veux que les images ne soient pas faussées comme le sont les boîtes. Le problème est que j'ai mis skew(-20deg) aux boîtes, et quand j'ai placé skew(20deg) sur l'image, cela ne fonctionnera pas. L'image ne se tiendra pas droite. Des solutions?

.accordion { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
    margin: 50px auto; 
 
    background-color: #FFAE00; 
 
} 
 

 
.accordion ul { 
 
    width: 90%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5%; 
 
    height: 100%; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    width: 25%; 
 
    height: 250px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
    float: none; 
 
    transform: skewX(-20deg); 
 
} 
 

 
.accordion ul li div { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 300px; 
 
    width: 37vw; 
 
    position: relative; 
 
    z-index: 0; 
 
    vertical-align: bottom; 
 
    padding: 55px 45px; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    margin-left: -53px; 
 
    text-decoration: none; 
 
    transform: skewX(20deg); 
 
    font-family: Open Sans, sans-serif; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    text-overflow: ellipsis; 
 
    position: relative; 
 
    z-index: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    font-family: Montserrat, sans-serif; 
 
    text-overflow: clip; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    border-bottom: unset; 
 
    margin-bottom: 2px; 
 
    top: 165px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 165px; 
 
    font-size: 13.5px; 
 
    font-weight: 100; 
 
    margin-left: 0; 
 
    height: auto; 
 
} 
 

 
.accordion ul li:nth-child(1) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(2) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(3) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(4) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul:hover li:hover { 
 
    width: 50%; 
 
} 
 

 
.accordion ul:hover li:hover a { 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    transform: none; 
 
}

<div class="accordion"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Fiddle: https://jsfiddle.net/c3wbvutw/

Answer 1

j'ai pu gérer à l'aide de la méthode que je parlais avant dans le commentaire Fondamentalement, j'ai utilisé ::before pseudo-éléments pour mettre l'image d'arrière-plan, puis désalignée les.

Check it out:

/* +++++++++++++++ NEW INFORMATION ++++++++++++++ */ 
 

 
.accordion ul li::before { 
 
    content: ""; 
 
    transform: skewX(20deg); 
 
    -ms-transform: skewX(20deg); 
 
    -webkit-transform: skewX(20deg); 
 
    background-image: url(http://michael-ferry.com/assets/accordion3.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    position: absolute; 
 
    transform: translateX(-50%) skewX(20deg); 
 
    -webkit-transform-origin: top left; 
 
    -ms-transform-origin: top left; 
 
    transform-origin: top left; 
 
    width: 200%; 
 
    height: 100%; 
 
} 
 

 
/* +++++++++++++++++++++++++++++++++++++++++++++ */ 
 

 
.accordion { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
    margin: 50px auto; 
 
    background-color: #FFAE00; 
 
} 
 

 
.accordion ul { 
 
    width: 90%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5%; 
 
    height: 100%; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    width: 25%; 
 
    height: 250px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
    float: none; 
 
    transform: skewX(-20deg); 
 
    overflow: hidden; 
 
} 
 

 
.accordion ul li div { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 300px; 
 
    width: 37vw; 
 
    position: relative; 
 
    z-index: 0; 
 
    vertical-align: bottom; 
 
    padding: 55px 45px; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    margin-left: -53px; 
 
    text-decoration: none; 
 
    transform: skewX(20deg); 
 
    font-family: Open Sans, sans-serif; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    text-overflow: ellipsis; 
 
    position: relative; 
 
    z-index: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    font-family: Montserrat, sans-serif; 
 
    text-overflow: clip; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    border-bottom: unset; 
 
    margin-bottom: 2px; 
 
    top: 165px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 165px; 
 
    font-size: 13.5px; 
 
    font-weight: 100; 
 
    margin-left: 0; 
 
    height: auto; 
 
} 
 

 
.accordion ul:hover li:hover { 
 
    width: 50%; 
 
} 
 

 
.accordion ul:hover li:hover a { 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    transform: none; 
 
}

<div class="accordion"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

transform:SkewX ne fonctionne pas d'une manière d'addition/déduction, il est plus comme l'inclinaison X TO degré Y de l'image d'origine.

Pour que vous annuliez la transformation, vous devez utiliser `transform: unset; ' J'ai ajouté le code suivant dans votre violon, cela avait fonctionné pour moi. (Ceci a aussi une version -webkit-) à: Remove applied CSS transformation

.accordion ul li { 
transform: unset; 
} 

EDIT: Si vous voulez que votre texte restent faussées, ajoutez une classe sur le sur le texte et utiliser :not() sélecteur