<style type="text/css">
      .triangle{/* 三角形图片位置 */
         background-image: url(img/traintop.png);
         width: 20px; 
         height: 20px;
         background-position: center;
         position: relative;
         top: -14px;/* 只需修改这里就可以了 */
         left: 74px;
         background-size: 100%;
         float: left;
      }
      .triangle-box{/* 隐藏底部可修改 */
         background-color: white;
          width: 14px;
          height: 1px;
          float: left;
          top: 13px;
          left: 3px;
          z-index: 0;
          position: relative;
      }
</style>

<body>
   <div style="background-color: transparent; border: 1px #DDDDDD solid; width: 200px; height: 100px;">
   <div class="triangle">
      <div class="triangle-box"></div>
   </div>
   </div>
</body>

图片可以去阿里ico下载  https://www.iconfont.cn/

css三角形文本框的更多相关文章

  1. css中文本框与按钮对不齐解决方案

    我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...

  2. css控制文本框的只读属性的方法

    css 封装整个只读文本框的属性: .TextBoxReadOnly{ border:1px solid #C0C0C0; text-align:left; background-color:#D3D ...

  3. css装饰文本框input

    在web程序前端页面中,<input>恐怕是用的最多的html元素了,各个需要录入信息的场合都会用到它,一般都会用css来修饰一下使得它更好看. 原始的不加修饰的文本框像下面,有些单调,页 ...

  4. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  5. css实现文本框和下拉框结合的案例

    html 代码部分 <div id="list-name-input" class="list-name-input"> <select ty ...

  6. 通过CSS使文本框中输入的小写字母变大写字母

    在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...

  7. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  8. CSS 文本框里添加按钮的实现

    有很多人做界面会经常发现设计师设计出这样的界面: 咋一看是一个文本框里加了一个按钮,经过谷歌之后,未发现在文本框里可以添加按钮. 但可以通过div来实现它. 我的做法是先做一个大小的div,然后用带里 ...

  9. css去除ios文本框默认圆角

    css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}

随机推荐

  1. 用VS Code搞Qt6：编译源代码与基本配置

    先说明一下,本水文老周仅讨论新版的 Qt 6,旧版的 Qt 不讨论. 尽管 Qt 有自己的开发环境,但老周必须说句不装逼的话:真的不好用.说起写代码,当然了,用记事本也能写.但是,有个高逼格的工具,写 ...

  2. [apue] 文件中的空洞

    空洞的概念 linux 上普通文件的大小与占用空间是两个概念,前者表示文件中数据的长度,后者表示数据占用的磁盘空间,通常后者大于前者,因为需要一些额外的空间用来记录文件的某些统计信息或附加信息.以及切 ...

  3. YII的lazy loading

    版本1 require('class\class1.php'); require('class\class1.php'); if($is_girl){ echo 'this is a girl'; $ ...

  4. 映射问题，命名空间不能为空：org.apache.ibatis.builder.BuilderException : Mapper's namesapce cannot be empty

    今天配置Spring配置文件时,出现了以下的报错 倒数第三行,意思是Mapper的namespace(命名空间)不能为空 检查xml文件里映射文件是否配置,如果没有配置,那请添加映射文件,不然Spri ...

  5. Linux 12 安装Docker

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 这里使用 yum ...

  6. java-运算符以及简单运用

    运算符: 1)赋值运算符:= 2)算术运算符:+-*/%,++,-- 3)关系运算符:>,<,>=,<=,==,!= boolean 4)逻辑运算符:&&,|| ...

  7. kubernetes网络模型

    Overview 本文将探讨Kubernetes中的网络模型,以及对各种网络模型进行分析. Underlay Network Model 什么是Underlay Network 底层网络 Underl ...

  8. Java SE 10 新增特性

    Java SE 10 新增特性 作者:Grey 原文地址:Java SE 10 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new ...

  9. 283. 移动零--LeetCode__双指针

    来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/move-zeroes 著作权归领扣网络所有.商业转载请联系官方授权,非商业转载请注明出处. 思路 用一 ...

  10. 275. H 指数 II--Leetcode_二分

    来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/h-index-ii 著作权归领扣网络所有.商业转载请联系官方授权,非商业转载请注明出处. 题目的大意是 ...