2014-06-18 19 views
0

問題是:v型底部爲here。我需要修剪塊的角落,使其離開固定背景(background-attachment:fixed),因此它通過v底部保持可滾動和可見。此外,角度必須固定在每個相同的塊(svg掩碼不會幫助我,因爲它具有可伸縮性)。塊的高度是不同的。具有固定背景附件的非矩形塊

對於幾天我試圖解決這個問題...誰能幫助...

PS:在截圖(黃色和暗)兩個塊與它的內容只與不同因此他們都擁有固定背景的v型三角形底部。

編輯:crossbrowser支持是必要的。

+0

HTML或jsfiddle會更好嗎? –

+0

jsfiddle只有幾個相同的塊和不同的背景 – tigrik2017

回答

0

我試過clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); 唯一的問題是你不能說從底部60px。

這裏是一個Fiddle

+0

但我可以使用js或jq並計算它。非常感謝! – tigrik2017

+0

忘記問......那麼Firefox,手機瀏覽器和IE呢? – tigrik2017

+0

哦.. jeah sry對此的支持仍然相當有限,我認爲它只適用於鍍鉻和移動鍍鉻。但我不知道任何其他方式來獲得這種效果。 – BrendanMullins

0

我會攻擊這個問題有三個div的。最外層有黑色/黑色背景。

下一個包含黃色背景。它可以是最外面的一個孩子。

然後,我會創建一個透明的PNG與V形,並把它放在內部(黃色)的頂部。如果將該div放置在內部/黃色div的底部,它看起來就好像它在背景中消失。