在梯度底部的CSS三角形

我一直在擺弄這個幾個小時，現在我沒有得到任何東西（除了搞清楚什麼不行），所以我想我會問。在梯度底部的CSS三角形

基本上，我有一個45度梯度的div。我想要做的是有一個三角形「剪切」的效果，切入它下面的div。我嘗試了幾個不同的東西，但主要的問題似乎是，因爲div跨越窗口，當窗口被調整大小時，漸變的大小也會改變。我甚至將顏色值硬編碼到三角形的漸變中，以使它們相匹配，但顯然在窗口大小調整時破壞了顏色值。我使用製作三角形的CSS邊框方法也遇到同樣的問題。

附加是我想要下面的三角的div的屏幕截圖。它需要是跨瀏覽器的。

screenshot

這是不是可以做？或者我是否需要放棄這個想法，並將我的漸變改爲90度或者一起忘記它？

謝謝！

來源

2014-06-17 anguiac7

我們可以得到你的小提琴的鏈接？ –

@ImranBughio這裏有一個鏈接。這是相當簡單的，因爲我的代碼都是本地的，我正在運行Bootstrap和Wordpress。 http://jsfiddle.net/EBWhg/ – anguiac7

你能提供一張你想要的圖像嗎？我無法用你的描述來描繪它。 – gtramontina

多少汗水後，我向你這個完全CSS的例子！完全可擴展！

Have a fiddle!

HTML

<div id="header" class="page-talk"> 
     <h1 class="page-title">talk</h1> 
</div>

CSS

html, body { 
    margin:0; 
    padding:0; 
} 
div#header { 
    height: 150px; 
    width: 100%; 
    background-image: -webkit-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%); 
    background-image: -moz-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%); 
    background-image: -o-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%); 
    background-image: linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%); 
    background-repeat: no-repeat; 
    background-size: cover; 
    position: relative; 
    z-index: 100; 
} 
h1.page-title { 
    font-size: 6em; 
    font-weight: 100; 
    font-family:sans-serif; 
    color: white; 
    margin:0; 
    margin-left:15px; 
} 
#header { 
    position: relative; 
} 
#header:before { 
    content:""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    width: 50%; 
    left: 0; 
    border-bottom: 20px solid rgba(255, 255, 255, 1); 
    border-right: 20px solid transparent; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#header:after { 
    content:""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    width: 50%; 
    right: 0; 
    border-bottom: 20px solid rgba(255, 255, 255, 1); 
    border-left: 20px solid transparent; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

來源

2014-06-17 05:32:32 misterManSam

非常感謝你！這很好。 – anguiac7

不用擔心，這很有趣！ :)現在，'box-sizing：border-box;'是一切正確縮放的魔法醬。 [更多信息]（http://css-tricks.com/box-sizing/）。您可能需要稍作更改才能使其與舊版瀏覽器兼容。我只是要確保它不會破壞老年人瀏覽器，並將其留在:) – misterManSam

不錯，但在所有這些解決方案中，我發現底部顏色必須堅實 - 即我們不能使用與白色區域重疊的圖像在箭頭的左側。 –

你可以嘗試三角形的倒數 - 在div底部的兩個單獨的白色形狀留下一個漸變色的三角形。同樣的事情也爲這另一個問題給出解決方案：

Achieve this background (see pic) with css

來源

2014-06-17 05:05:53

在梯度底部的CSS三角形

回答

相關問題