歪みのあるボックスと背景の画像

Question

箱の中に入れたい画像は、箱と同じ方法で歪んでいます。ボックスのように画像に歪みがないようにします。問題は、ボックスにskew(-20deg)を設定していて、画像にskew(20deg)を設定すると、うまく動作しないことです。画像はまっすぐ立っていません。どんな解決策ですか？

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

フィドル：https://jsfiddle.net/c3wbvutw/

Answer 1

私は私が前に話した方法を使用して、それを管理することができましたコメントで。 基本的には、::before疑似要素を使用して背景イメージを配置し、それらのイメージをスキューします。

それをチェックアウト：これはあなたの問題を解決するかどうか

/* +++++++++++++++ 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が追加/控除の方法では動作しません、それはより多くの元の画像からY度TOスキューXのようなものです。

変換を元に戻すには、「transform：unset;」を使用する必要があります。 私はあなたのフィドルで次のコードを追加しました。（これも-webkit-バージョンがあります）Refer To：Remove applied CSS transformation

.accordion ul li { 
transform: unset; 
} 

EDIT：あなたが偏ったまま、あなたのテキストをしたい場合は、テキスト上にクラスを追加し、:not()セレクタを使用