如何讓3 div在css中歪斜

如何製作帶有失真的3 div，如圖所示？如何讓3 div在css中歪斜

我有此：

.cars { 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 

 
.car { 
 
    width: 33.33333333%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    position: relative; 
 
    -webkit-transform: skewx(-10deg); 
 
    -moz-transform: skewx(-10deg); 
 
    -o-transform: skewx(-10deg); 
 
    -ms-transform: skewx(-10deg); 
 
    transform: skewx(-10deg); 
 
    transform-origin: top left; 
 
    float: left; 
 
    display: inline; 
 
} 
 

 
.car:nth-child(2) { 
 
    background: #000 
 
} 
 

 
.car:nth-child(3) { 
 
    background: #ff0000 
 
}

<div class="cars"> 
 
    <div class="car"></div> 
 
    <div class="car"></div> 
 
    <div class="car"></div> 
 
</div>

jsFiddle

左格 - 左上角直，右上角傾斜

中心格 - 左，右上角傾斜

右格 - 左上角傾斜，右側角球直

來源

2016-07-10 Sepack191

，如果你使用的是什麼正常3周的div PNG透明圖像？......只是讓他們相互重疊......應該做的伎倆 –

你可以上傳一個小提琴或整個代碼的樣本？包括HTML – Roysh

每個div都是一個鏈接，所以我需要使塊變形 – Sepack191

我已經使用CSS的:after僞類中的最後一個傾斜後添加另一個紅色方塊。然而，這一個沒有傾斜，從而「充盈」傾斜的位，你不想要的：

.car:nth-child(3):after { 
    /* create the box */ 
    content: ""; 
    display: block; 
    /* make it fill the required space */ 
    width: 80%; /* (this is only 80 because it was a bit large at 100) */ 
    height: 100%; 
    background: #ff0000; 
    /* transform it in the opposite direction to counter the -10deg skew of .car */ 
    -webkit-transform: skewx(10deg); 
    -moz-transform: skewx(10deg); 
    -o-transform: skewx(10deg); 
    -ms-transform: skewx(10deg); 
    transform: skewx(10deg); 
    transform-origin: top left; 
    position: relative; 
    right: -20%; /* counteract the 80% width */ 
}

我做了第一個div相同，:before：

.car:nth-child(3):before{ 
    content: ""; 
    display: block; 
    width: 70%; 
    height: 100%; 
    background: #3498db; 
    -webkit-transform: skewx(10deg); 
    -moz-transform: skewx(10deg); 
    -o-transform: skewx(10deg); 
    -ms-transform: skewx(10deg); 
    transform: skewx(10deg); 
    transform-origin: top left; 
    position: relative; 
    right: 40%; 
}

.cars { 
 
    width: 100%; 
 
    height: 500px; 
 
    margin-left: 100px; 
 
} 
 
.car { 
 
    width: 33.33333333%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    position: relative; 
 
    -webkit-transform: skewx(-10deg); 
 
    -moz-transform: skewx(-10deg); 
 
    -o-transform: skewx(-10deg); 
 
    -ms-transform: skewx(-10deg); 
 
    transform: skewx(-10deg); 
 
    transform-origin: top left; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.car:nth-child(2) { 
 
    background: #000; 
 
} 
 
.car:nth-child(3) { 
 
    background: #ff0000; 
 
} 
 
.car:nth-child(3):after { 
 
    content: ""; 
 
    display: block; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #ff0000; 
 
    -webkit-transform: skewx(10deg); 
 
    -moz-transform: skewx(10deg); 
 
    -o-transform: skewx(10deg); 
 
    -ms-transform: skewx(10deg); 
 
    transform: skewx(10deg); 
 
    transform-origin: top left; 
 
    position: relative; 
 
    right: -30%; 
 
} 
 
.car:nth-child(1):before { 
 
    content: ""; 
 
    display: block; 
 
    width: 70%; 
 
    height: 100%; 
 
    background: #3498db; 
 
    -webkit-transform: skewx(10deg); 
 
    -moz-transform: skewx(10deg); 
 
    -o-transform: skewx(10deg); 
 
    -ms-transform: skewx(10deg); 
 
    transform: skewx(10deg); 
 
    transform-origin: top left; 
 
    position: relative; 
 
    right: 40%; 
 
}

<div class="cars"> 
 
    <div class="car first"></div> 
 
    <div class="car"></div> 
 
    <div class="car last"></div> 
 
</div> 
 
<br><br>

來源

2016-07-10 09:28:38

這是否有幫助在所有？ @ Sepack191 –

如何讓3 div在css中歪斜

回答

相關問題