Html里制作input框上面的小三角的方法

首先我们打开编辑器，进行html编。我用 i 标签来制作小三角。
在body里面写个 i 标签，并且 i 标签里不需要写任何内容，如下图所示：

然后可以在内部样式表里写css代码来修饰它。
i 标签为块级元素，独占一行。我么制作的小三角由于 i 标签里没有内容，所以我们设置他的宽高为：width:0; height:0;
接着设置他的左右外边框：
border-left: 10px solid cyan;
border-right: 10px solid pink;
由于没有内容，效果图如下：

继续我们在设置他的底部边框 border-bottom: 10px solid yellow； 就可以出现小三角了：

（如果需要倒立的小三角，只需设置上边框就行了 border-top: 8px solid yellow; ）

此时如果你只要小三角，左右边框不显示只需把它左右边框颜色改成 #fff 就行。
border-left: 10px solid #fff;
border-right: 10px solid #fff;

（小三角变成上面input框例子也只需要把底边框的颜色改成 #fff 就行）
border-bottom: 10px solid #fff;

（我这里把背景颜色和左右边框的颜色都改成了 #eee ）

这样我们小三角就完成了。
如果需要移动小三角的位置，只需要给 i 标签设置绝对定位或相对定位就行。例如：
position:absolute;
top: 5 px; (距离自己设置)
right: 5px;
left: 5px;
bottom: 5px;
最后小提示一下：如果需要调小三角左右两边的倾斜程度可以通过调左右边框的边框宽度或者通过绝对定位（相对定位）来调制。
下面为全部代码：
最终结果图：