問題是:v型底部爲here。我需要修剪塊的角落,使其離開固定背景(background-attachment:fixed),因此它通過v底部保持可滾動和可見。此外,角度必須固定在每個相同的塊(svg掩碼不會幫助我,因爲它具有可伸縮性)。塊的高度是不同的。具有固定背景附件的非矩形塊
對於幾天我試圖解決這個問題...誰能幫助...
PS:在截圖(黃色和暗)兩個塊與它的內容只與不同因此他們都擁有固定背景的v型三角形底部。
編輯:crossbrowser支持是必要的。
問題是:v型底部爲here。我需要修剪塊的角落,使其離開固定背景(background-attachment:fixed),因此它通過v底部保持可滾動和可見。此外,角度必須固定在每個相同的塊(svg掩碼不會幫助我,因爲它具有可伸縮性)。塊的高度是不同的。具有固定背景附件的非矩形塊
對於幾天我試圖解決這個問題...誰能幫助...
PS:在截圖(黃色和暗)兩個塊與它的內容只與不同因此他們都擁有固定背景的v型三角形底部。
編輯:crossbrowser支持是必要的。
我試過clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
唯一的問題是你不能說從底部60px。
這裏是一個Fiddle
但我可以使用js或jq並計算它。非常感謝! – tigrik2017
忘記問......那麼Firefox,手機瀏覽器和IE呢? – tigrik2017
哦.. jeah sry對此的支持仍然相當有限,我認爲它只適用於鍍鉻和移動鍍鉻。但我不知道任何其他方式來獲得這種效果。 – BrendanMullins
我會攻擊這個問題有三個div的。最外層有黑色/黑色背景。
下一個包含黃色背景。它可以是最外面的一個孩子。
然後,我會創建一個透明的PNG與V形,並把它放在內部(黃色)的頂部。如果將該div放置在內部/黃色div的底部,它看起來就好像它在背景中消失。
HTML或jsfiddle會更好嗎? –
jsfiddle只有幾個相同的塊和不同的背景 – tigrik2017