Html 如何向输入中添加三角形[type='；text'；]

我想在

input type='text'

HTML元素的右上角添加一个小三角形，就像Excel用来表示注释一样

对这个问题的公认答案是：

演示如何对表格单元格执行此操作。我天真地将“note”css类应用于我的输入元素，但它不起作用。关于如何实现这一点，有什么建议吗？

伪元素。您可以使用与linked post（）中描述的相同的CSS，但必须将该类应用于祖先

。注意{
位置：相对位置；
显示：内联块；
}
。注：在{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
显示：块；
左边框：20px实心透明；
边框底部：20px实心透明；
边框顶部：20px实心#f00；
}

---

给定一个简单的输入字段

 <input type="text" />

当然，您可以通过长方体阴影的偏移量（y/x）更改三角形的大小

如果需要将三角形放置在输入中，您只需向上面的代码添加两个属性，并使用

outline

和

outline offset

而不是

border

属性来创建外部边框的错觉。所有阴影都不会从其位置移动，只需给偏移留出足够的空间，以便包裹它们

---

结果（内部三角形）

---

代码

input {
  padding: 10px;
  border: 1px #ccc solid;
  margin: 15px;
  box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff, 
              1px -12px 0 #fff, 2px -11px 0 #fff, 
              3px -10px 0 #fff, 4px -9px 0 #fff, 
              5px -8px 0 #fff, 6px -7px 0 #fff, 
              7px -6px 0 #fff, 8px -5px 0 #fff, 
              9px -3px 0 #fff, 10px -2px 0 #fff, 
              11px -1px 0 #fff, 12px 0 0 #fff, 
              8px -12px 0 #9bc;
}

input {
   padding: 0;
   border: 0;
   outline: 1px #ccc solid;
   outline-offset: 15px;  
   ...
}

---

要用红色角标记所有文本输入，可以使用

textarea, input[type="text"], input:not([type]) {
  background: linear-gradient(225deg, red 5px, white 5px);
}

如果只想标记必填字段，请使用

required

属性和选择器：

[必需]{背景：线性梯度（225deg，红色5px，白色5px）；}

请张贴您的代码。3次否决票；添加一条评论来说明问题的症结所在会很有帮助。我认为我想从链接问题的答案中得到什么已经足够清楚了，而无需发布code.Upvoted。问题和答案都是有用的。那太好了+1。唯一的问题是，我猜三角形必须在元素之外。我不确定这是否是OP想要的。很好的解决方案。令人印象深刻的答案。啊，是的。但我不想维护代码；基于这个答案。。。可以将输入设置为无边框，并将其包装在带边框的div中，使三角形看起来像是在元素中。@Turnip我刚刚包含了内部三角形版本。这比使用父元素更容易：）