<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. SP96 SHOP-Shopping 题解

    \(To\) \(SP96\) 这是一道比较简单的 \(bfs\) ,初学者可以锻炼一下自己理解题意和改代码的能力. 题目中有几个细节: \(n\) 和 \(m\) 的输入顺序,应该先输入 \(m\) ...

  2. ubu18时间设置

    ubu18 日期设置 1.date date 命令修改系统时间,重启失效,需要写入硬件Bios #查看日期 date #修改日期 date -s "2022-01-14 09:32:00&q ...

  3. linux 文件存放目录

    Linux不靠文件扩展名区分文件类型(windous病毒和木马不能在linux里面运行) 所有的存储设备都必须挂载之后才能使用(包括硬盘,U盘和光盘),例如给它手工给它分配盘符 Linux所有内容以文 ...

  4. cache2go-源码阅读

    简介 cache2go 是非常简短的 go 开源项目了,很适合作为第一个读源码项目. 如果你有一定的 go 开发经验,读起来会感觉到比较容易. 如果你刚刚接触 go 语音,基础知识还不完全了解,希望阅 ...

  5. 基于ABP和Magicodes实现Excel导出操作

      前端使用的vue-element-admin框架,后端使用ABP框架,Excel导出使用的Magicodes.IE.Excel.Abp库.Excel导入和导出操作几乎一样,不再介绍.文本主要介绍E ...

  6. ROS机械臂 Movelt 学习笔记4 | Move Group 接口 Python

    Python 的使用总是比 C++ 简单许多,Move Group 的 Python 接口更为便捷,也为使用者提供了很多用于操纵机器人和机械臂的函数,能够和 C++ 接口实现相同的功能: 设置机械臂的 ...

  7. 《笨办法学Python3 》入坑必备，并不是真笨学！！！

    <笨办法学Python3 >免费下载地址 内容简介 · · · · · · 本书是一本Python入门书籍,适合对计算机了解不多,没有学过编程,但对编程感兴趣的读者学习使用.这本书以习题的 ...

  8. Sonatype Nexus3 搭建私有仓库

    Nexus是Sonatype提供的仓库管理平台,Nuexus Repository OSS3能够支持Maven.npm.Docker.YUM.Helm等格式数据的存储和发布:并且能够与Jekins.S ...

  9. django中的forms组件

    form介绍 用户需要向后端提交一些数据时,我们常常把这些数据放在一个form表单里,采用form标签,里面包含一些input等标签把用户的数据提交给后端. 在给后端提交数据的时候,我们常常也需要对于 ...

  10. java-Servlet生命周期与jsp

    容器如何处理请求资源路径? 比如,在浏览器地址栏输入:ip地址路径/abc.html. Step1.默认访问的是一个servlet,会从web.xml中查找有没有匹配的servlet.         ...