Javascript 如何在文本框上创建角点？

我想在文本框的右上角创建一个角，如下图所示。

我如何使用css实现它

我有下面的文本框，我必须在其右角应用

.up {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 25px 0 0;
border-color: #489af2 transparent transparent transparent;
position:relative;
}


.textbox{
 width:43px;
 height:23px;
 text-align:right;
 padding-bottom:0px;
 padding-top:4px;
 position:absolute;
}

.up p {

top: -35px;
left: 2px;
position: relative;
z-index:1;
color:#FFF;
font-size:11px;
font-weight:bold;
//transform: rotate(-45deg);
}

<input type="number" class="textbox"/>
<div class="up">
<p>3.9</p>
</div>

.up{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：25px 25px 0；
边框颜色：#489af2透明；
位置：相对位置；
}
.文本框{
宽度：43px；
高度：23px；
文本对齐：右对齐；
垫底：0px；
垫面：4px；
位置：绝对位置；
}
.上p{
顶部：-35px；
左：2px；
位置：相对位置；
z指数：1；
颜色：#FFF；
字体大小：11px；
字体大小：粗体；
//变换：旋转（-45度）；
}
3.9

---

使用一个绝对元素，该元素位于右上角，在右上角有一个边框

.wrapper{
位置：相对位置；
显示：内联块；
边缘顶部：50px；
}
.包装纸.形状{
宽度：40px；
高度：40px；
右边框：1px纯黑；
边框顶部：1件纯黑；
位置：绝对位置；
右：-10px；
顶部：-10px；
}

---

您可以在

元素之后使用
：：来避免附加标记


.wrap{
位置：相对位置；
填充物：5px；
显示：内联块；
}
.换行文本区域{
高度：120px；
}
.wrap：：之后{
内容：''；
高度：40px；
宽度：40px；
位置：绝对位置；
排名：0；
右：0；
边框顶部：实心1px#ff9000；
右边框：实心1px#ff9000；
}
到目前为止，所有的答案都很好，但鉴于我已经在输入我的版本，我还是将其发布在这里


.myText{
宽度：200px；
位置：相对位置；
填充：5px10px0；
}
.myText输入{
宽度：100%；
}
.myText:之后{
内容：“；
显示：块；
宽度：15px；
高度：15px；
边框顶部：1件纯黑；
右边框：1px纯黑；
位置：绝对位置；
排名：0；
右：0；
}


.corner{
右边框：1px纯黑；
边框顶部：1件纯黑；
宽度：20px；
高度：10px；
左边距：160像素；
}
只需将文本框放在一个容器中，并添加两个伪元素（
：before
和
：after
）

尝试为我的文本框应用代码，但有点混乱，已经用我的自定义文本框更新了问题。所以你只是想让它位于右侧？怎么搞砸了？
.container {
position: relative;
padding: 5px;
}

.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
right: 0;
background: #000;
}

.container:before {
width: 30px;
height: 1px;
}

.container:after {
width: 1px;
height: 30px;
}