グラデーションの背景を持つ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); 
} 

私はあなたが、勾配自体であるCSSの三角形CSSの三角形を作成することはできませんが、このtutorial on CSS tricks.

Answer 1

作成三角形（または他の形状 - pentagons, hexagons、八角形、decagons、dodecagons、tetradecagons、octadecagonsなど）の勾配（またはイメージの背景の他の種類）とは、CSSの変換と本当に簡単です。

しかし、この場合、三角形は必要ありません。正方形の擬似要素を45度回転させて、隅から隅までグラデーションを適用するだけです。

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

を使用していました。私が示唆している唯一のトリックは、グラデーションの背景内の色に最も似た色を選択することです。これは、グラデーションの実際の大きさと、三角形がどの程度うまく混ざり合っているかによって決まります。

赤いdivについては、＃d94040という色を使ってみることができますが、境界線と影がありません。ただし、これらを追加することができます。 CSS三角形に枠線を追加するには、同じ大きさのCSS三角形である内側を配置することができます。これらを重複させるためには、絶対配置とZ-インデックスを使用する必要があります。

または、:: afterまたは:: beforeを使用して、追加されたHTMLコードなしでCSSの三角形を作成することはできますが、最新のブラウザでのみ機能します。

Answer 3

CSS3では、「ボーダートリック」で三角形を作成できます。この境界線は色付きで背景を持つことができます。

WebKit（およびChrome 12以上）は、グラデーション画像としてグラデーションをサポートしています。

もっとサポートされている解決策として、私はあなたに背景のグラデーションを与えることをお勧めします：魔法使いの前の擬似要素は、「背景勾配」+（境界線付きのcss三角形）トリックを適用します。

Here is a cssTriangle generatorお試しください。