我想在文本框的右上角创建一个角,如下图所示.
我怎么能用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); }3.9
JsFiddle为上面的代码
您可以使用::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;
}