title: Creating a triangle in css with a gradient background
body: <p>I am trying to create a triangle in css with a gradient background. I have not had any success as yet. Is there way to do this to bring off this effect seen in the image below.
  (The triangle that is attached to the Wrong password error box.)</p>
  
  <p><strong>Design in Photoshop</strong>
  <img src="https://i.stack.imgur.com/9KX09.png" alt="enter image description here"></p>
  
  <p><strong>This is the design I have so far in HTML and CSS.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/3lrlu.png" alt="enter image description here"></p>
  
  <p>Here is the css I have for the triangle at the moment.</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>I was using this <a href="http://css-tricks.com/snippets/css/css-triangle/" rel="nofollow noreferrer">tutorial on CSS tricks.</a></p>