CSS斜めdiv背景画像付き数少ない

Question

それぞれの幅が33％の3つのdivを作成しました。これは数度傾斜したいものです。 最初と最後のdivは斜めにならないようにしてください。内側のコンテンツに対してのみ機能します。近い将来、4つのdiv（25％幅）を追加したいからです。

また、ホバー上で背景が広いdivを作成したいと思います。そのため、他のdivは30％になり、ホバリングしたdivは40％になります。

注：画像自体は回転させず、divのみを回転します。画像は回転させずに置く必要があります。

私はCSSでそれを行うことはできません。

私の現在のコード：

<div class="divisions"> 

<div class="col-sm-4 division hosting"> 
<div class="inner"> 

</div> 
</div> 

<div class="col-sm-4 division shop"> 
<div class="inner"> 

</div> 
</div> 

<div class="col-sm-4 division solutions"> 
<div class="inner"> 

</div> 
</div> 

</div> 

JSFiddle：https://jsfiddle.net/1cwxLw7h/2/

私が欲しいもの：

Answer 1

body {margin: 0px;} 
 

 
.divisions .col-xs-4 { 
 
    padding: 0; 
 
} 
 
.divisions .division { 
 
    transition: width 0.25s linear; 
 
} 
 
.divisions:hover .division { 
 
    width: 31%; 
 
} 
 
.divisions:hover .division:hover { 
 
    width: 38%; 
 
} 
 
.divisions .solutions .inner { 
 
    height: 100%; 
 
    min-height: 750px; 
 
    background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat; 
 
    background-size: cover; 
 
} 
 
.divisions .shop .inner { 
 
    height: 100%; 
 
    min-height: 750px; 
 
    background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat; 
 
    background-size: cover; 
 
} 
 
.divisions .hosting .inner-holder { 
 
    transform: skewX(-4deg); 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0 -30px; 
 
    z-index: 5; 
 
} 
 
.divisions .hosting .inner { 
 
    height: 100%; 
 
    min-height: 750px; 
 
    background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    transform: skewX(4deg); 
 
    margin: 0 -30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="divisions"> 
 

 
    <div class="col-xs-4 division solutions"> 
 
    <div class="inner"> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-4 division hosting"> 
 
    <div class="inner-holder"> 
 
     <div class="inner"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-4 division shop"> 
 
    <div class="inner"> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

コードの下でこれを試してください。ホバーをホバーすると、div sizeが増えます。

body {margin: 0px;} 
 

 
.col-sm-4 {float: left; width: 33.33333333333333%; display: inline-block} 
 
.divisions .solutions .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat; background-size: cover} 
 

 
.divisions .shop .inner {height: 100%; min-height: 750px; background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat; background-size: cover} 
 

 
.divisions .hosting .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat; background-size: cover} 
 
.divisions{ 
 
    width:100%; 
 
    height:auto; 
 
    overflow:hidden; 
 
} 
 
.divisions .solutions{ 
 
    transform:skew(-3deg); 
 
    float:left; 
 
    margin-left:-18px; 
 
    transition:width 1s ease; 
 
} 
 
.divisions .solutions:hover{ 
 
    width:40%; 
 
} 
 
.divisions .hosting{ 
 
    transform:skew(-3deg); 
 
    float:left; 
 
    position:absolute; 
 
    z-index:2; 
 
    width:45%; 
 
transition:width 1s ease; 
 
} 
 
.divisions .hosting:hover{ 
 
    width:50%; 
 
} 
 
.divisions .shop{ 
 
    transform:skew(-3deg); 
 
    float:right; 
 
    margin-right:-18px; 
 
    transition:width 1s ease; 
 
} 
 
.divisions .shop:hover{ 
 
    width:45%; 
 
}

<div class="divisions"> 
 

 
<div class="col-sm-4 division solutions"> 
 
<div class="inner"> 
 

 
</div> 
 
</div> 
 

 
<div class="col-sm-4 division hosting"> 
 
<div class="inner"> 
 

 
</div> 
 
</div> 
 

 
<div class="col-sm-4 division shop"> 
 
<div class="inner"> 
 

 
</div> 
 
</div> 
 

 
</div>