当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何在文本框上创建角落角?》经验,为你挑选了1个好方法。

我想在文本框的右上角创建一个角,如下图所示. 在此输入图像描述

我怎么能用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为上面的代码



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;
}
推荐阅读
echo7111436
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有