html - 文本框设计与 Silverlight 中的文本框相同

Question

我需要制作一个与我们在 silverlight 中设计相同的文本框，如下所示:

现在，问题出在文本框右上角的小三 Angular 形上。我无法将其定位在文本框上。我的文本框看起来像这样:

HTML:

<div id='wrap'>
  <input type="text" id="validateInput"/>
  <span>
    <img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
  </span>
</div>

CSS:

#validateInput
{
  background-color: #FFFFE0;
  border: 1px solid red;
  height:20px;
}

.triangleimg
{
  vertical-align:top;
  position:absolute;
}

这是一个working demo对于到目前为止我已经尝试过的代码。任何帮助将不胜感激。

Answer 1

如果可以更改html结构，也可以将css用于箭头

#validateInput {
  background-color: #FFFFE0;
  border: 1px solid red;
  height: 20px;
}
#wrap span {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
#wrap span:after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 5px;
  border-color: red;
  border-style: solid;
  transform: rotate(45deg);
  box-shadow: 0px 0px 0px 1px #FFFFE0;
}

<div id='wrap'>
  <span><input type="text" id="validateInput" /></span>
</div>