title: Text box designing same as Text box in Silverlight
body: <p>I need to make a textbox with the same designing as we have in silverlight like this:</p>
  
  <p><a href="https://i.stack.imgur.com/FEFIL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FEFIL.png" alt="enter image description here"></a> </p>
  
  <p>Now, the problem is the little triangle at the top right corner of the textbox. I am unable to position it over the textbox. My textbox look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/NwpCQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NwpCQ.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id='wrap'&gt;
    &lt;input type="text" id="validateInput"/&gt;
    &lt;span&gt;
      &lt;img src="http://snag.gy/C3CDl.jpg" class="triangleimg"&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#validateInput
  {
    background-color: #FFFFE0;
    border: 1px solid red;
    height:20px;
  }
  
  .triangleimg
  {
    vertical-align:top;
    position:absolute;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/6td6k7jt/" rel="nofollow noreferrer">working demo</a> for the code that so far I have tried. Any help would be appreciated.</p>