Ich versuche, ein Dreieck in CSS mit einem Hintergrund mit Farbverlauf zu erstellen. Ich hatte noch keinen Erfolg. Gibt es eine Möglichkeit, diesen Effekt auszulösen, der im Bild unten zu sehen ist? (Das Dreieck, das an das Fehlerfeld "Falsches Kennwort" angehängt ist.)

Entwerfen Sie in Photoshop

Dies ist das Design, das ich bisher in HTML und CSS habe.

Hier ist das CSS, das ich im Moment für das Dreieck habe.

.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);
}

Ich habe das benutztTutorial über CSS-Tricks.