如何在文本框上创建角落角？

Question

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

我怎么能用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>

JsFiddle为上面的代码

Answer 1

您可以使用::after元素来执行此操作以避免额外的标记.

.wrap {
  position: relative;
  padding: 5px;
  display: inline-block;
}
.wrap textarea {
  height: 120px;
}
.wrap::after {
  content: '';
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  border-top: solid 1px #ff9000;
  border-right: solid 1px #ff9000;
}

<div class="wrap">
  <textarea></textarea>
</div>