CSS斜數div與背景圖像

我創建了3個div，每個33％的寬度，我想傾斜幾度。第一個和最後一個div不應該傾斜，以便它只能用於內部內容。這也是因爲我想在不久的將來添加4個div（寬度爲25％）。CSS斜數div與背景圖像

我也想做一個背景更寬的div，懸停。所以其他divs會變成30％，懸停的變成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/

我想要什麼：

來源

2016-07-26 Henk Z

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>

來源

2016-07-26 09:58:19

謝謝，但這也旋轉圖像。我不想旋轉圖像。我如何才能使div傾斜，但不要轉動圖像？我怎樣才能創造懸停效果？ –

非常感謝！唯一我仍然想念的是懸停效果。當懸停在其中一個div上時，它會使懸停時的div更大（寬度爲40％） –

@HenkZ您正在使用Bootstrap的列，它們爲每列預定義了寬度。最好不要改變它們。如果它非常必要，那麼最好使用沒有Bootstrap類的列。 –

嘗試下面的代碼，當你將鼠標懸停在它上面時，它會增加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>

來源

2016-07-26 11:24:10 frnt

CSS斜數div與背景圖像

回答

相關問題