2017-02-20 78 views
-2

我正在尋找創建4個不同形狀的內容區域,將響應工作。這裏有一個例子形象 - non-symmetrical shapes你可以在css中創建非對稱形狀

是否有可能創造4個格容器這樣無需使用SVG的?我知道你可以在容器內部創建一個三角形形狀,並將其定位在絕對右上方,但是接下來的形狀(float float right)需要更高的Z-index才能出現在頂部。

這一切聽起來都很混亂,有人可以提醒嗎?

+1

你嘗試過什麼?你的代碼在哪裏? HTML,CSS? SO不是一個代碼製作網站。我們調試你的代碼 –

+0

這更像是一個討論點,因爲問題表明它會以svg形式更好還是可以使用css?我不確定我寫的地方是否有人可以爲我編碼? – SamXronn

+1

@SamXronn:這應該引導你在正確的方向 - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive。 – Harry

回答

3

有多種方法可以達到這種效果。

一種方法是:

  • 使用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>

+1

嗨,謝謝你,這是一個非常好的答案,有可能使這些塊完整的寬度,我明白他們如何工作,現在與固定的寬度。但是,例如,它們可能每個都是50%。 – SamXronn

+0

是的,通過一些雜耍,應該可以使這種方法奏效,用'%'或'vw'等相對單位替換所有絕對單位。 – Rounin