how to create a corner angle over a textbox?

Question

I want to create a corner at the right top corner of a textbox like in below image.

how can I do it using css?

I have the following text box on which I have to apply the right corner

.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 for the above code

Answer 1

You can do this using an ::after element to avoid additional markup.

.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>

Answer 2

Use an absolute element which is positioned in the right top and has a border to right and top.

.wrapper {
  position: relative;
  display:inline-block;
  margin-top: 50px;
}
.wrapper .shape {
  width: 40px;
  height: 40px;
  border-right: 1px solid black;
  border-top: 1px solid black;
  position: absolute;
  right: -10px;
  top: -10px;
}

<div class="wrapper">
  <textarea></textarea>
  <div class="shape"></div>
</div>