用漸變背景在css中創建三角形

Question

我正嘗試在css中用漸變背景創建三角形。我還沒有取得任何成功。有沒有辦法做到這一點，以發揮在下面的圖片中看到這種效果。 （附加到了錯誤的密碼錯誤框中的三角形。）在Photoshop

這

設計是設計我在HTML和CSS至今。

這裏是CSS我對此刻的三角形。

.error-triangle { 
    wwidth: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid blue; 
    margin-top: 64px; 
    margin-left: 350px; 
    position: fixed; 
    -webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
     -moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
      box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
    background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image: -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:  -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:  -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:   linear-gradient(to top, #eb6767, #d94040 35%, #eb6767); 
} 

我就是用這個tutorial on CSS tricks.

Answer 1

創建三角形（或其他形狀 - pentagons, hexagons，八角形，decagons，dodecagons，tetradecagons，octadecagons等）用梯度（或任何其他類型的圖像背景）是CSS轉換很容易。

但在這種情況下，你甚至不需要一個三角形。你只需要旋轉45deg的方形僞元素，並從角落到角落應用漸變。

demo

<div class='warn'></div> 

CSS：

.warn { 
    position: relative; 
    margin: 0 auto; 
    border: solid 1px darkred; 
    width: 12em; height: 3em; 
    border-radius: .2em; 
    background: linear-gradient(lightcoral, firebrick); 
} 
.warn:before { 
    position: absolute; 
    top: 50%; left: 0; 
    margin: -.35em -.45em; 
    border-left: inherit; border-bottom: inherit; 
    /* pick width & height such that 
    the diagonal of the square is 1em = 1/3 the height of the warn bubble */ 
    width: .7em; height: .7em; 
    border-radius: 0 0 0 .2em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%); 
    content: ''; 
} 

Answer 2

您可以創建一個CSS三角形，而不是CSS三角形本身就是一個梯度。我建議的唯一技巧是挑選最接近漸變背景中顏色的顏色。這取決於你的漸變的實際大小以及三角形的融合程度。

對於紅色的div，你可以嘗試使用顏色＃d94040，但它會缺少邊框和陰影。但是，這些可以添加。要爲CSS三角形添加邊框，您可以在其中放置一個同樣尺寸的CSS三角形。這將需要使用絕對定位和z-索引來重疊它們。

或者您可以使用:: after或:: before來創建CSS三角形而不添加HTML代碼，但那樣只會在現代瀏覽器中才能使用。

Answer 3

在CSS3中，您可以使用「邊框技巧」創建一個三角形。這個邊框可以是彩色的，可以有背景。

WebKit現在（和Chrome 12至少）支持漸變作爲邊框圖像。

對於更受支持的解決方案，我建議您將'gradient'背景作爲女巫的僞元素，然後應用'background-gradient'+（帶邊框的css三角形）技巧。

Here is a cssTriangle generator供您試驗。