我正在尋找創建4個不同形狀的內容區域,將響應工作。這裏有一個例子形象 - 你可以在css中創建非對稱形狀
是否有可能創造4個格容器這樣無需使用SVG的?我知道你可以在容器內部創建一個三角形形狀,並將其定位在絕對右上方,但是接下來的形狀(float float right)需要更高的Z-index才能出現在頂部。
這一切聽起來都很混亂,有人可以提醒嗎?
我正在尋找創建4個不同形狀的內容區域,將響應工作。這裏有一個例子形象 - 你可以在css中創建非對稱形狀
是否有可能創造4個格容器這樣無需使用SVG的?我知道你可以在容器內部創建一個三角形形狀,並將其定位在絕對右上方,但是接下來的形狀(float float right)需要更高的Z-index才能出現在頂部。
這一切聽起來都很混亂,有人可以提醒嗎?
有多種方法可以達到這種效果。
一種方法是:
transform: skew
改變右手的角度divs
divs
向左滑動,所以它們重疊的左手divs
::after
僞元素以隱藏在右側的右側divs
工作實例:
body {
width: 200vw;
}
div {
float: left;
width: 400px;
height: 90px;
border-left: 3px solid rgb(255,255,255);
border-bottom: 3px solid rgb(255,255,255);
}
div:nth-of-type(3) {
clear: left;
}
div:nth-of-type(even) {
position: relative;
transform:skew(315deg);
}
div:nth-of-type(even)::after {
content: '';
display:block;
position: absolute;
top:0;
height:90px;
background-color:rgb(255,255,255);
transform:skew(-315deg);
}
div:nth-of-type(1) {
background-color:rgb(149,117,117);
}
div:nth-of-type(2) {
left: -67px;
background-color:rgb(117,149,117);
}
div:nth-of-type(3) {
background-color:rgb(117,133,149);
}
div:nth-of-type(4) {
left: -160px;
background-color:rgb(149,117,149);
}
div:nth-of-type(2)::after {
width:228px;
right:-60px;
}
div:nth-of-type(4)::after {
width:150px;
right:-75px;
}
div p {
height: 90px;
margin: 0;
padding: 0 24px;
line-height: 90px;
font-size: 33px;
color: rgb(255,255,255);
}
div:nth-of-type(even) p {
transform: skew(-315deg);
}
<div><p>one</p></div>
<div><p>two</p></div>
<div><p>three</p></div>
<div><p>four</p></div>
你嘗試過什麼?你的代碼在哪裏? HTML,CSS? SO不是一個代碼製作網站。我們調試你的代碼 –
這更像是一個討論點,因爲問題表明它會以svg形式更好還是可以使用css?我不確定我寫的地方是否有人可以爲我編碼? – SamXronn
@SamXronn:這應該引導你在正確的方向 - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive。 – Harry