<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. Node.js精进（11）——Socket.IO

    Socket.IO 是一个建立在 WebSocket 协议之上的库,可以在客户端和服务器之间实现低延迟.双向和基于事件的通信. 并且提供额外的保证,例如回退到 HTTP 长轮询.自动重连.数据包缓冲. ...

  2. github碰到的问题

    下载问题 自己编译一下 mvn clear mvn compile mvn package 自己编译之后的文件,然后解压即可,第一次自己傻傻的,直接用源码跑,少报错! 项目预览问题 添加1s即可 下载 ...

  3. tarjan算法和缩点

    tarjan可以找强连通的分量,但它的作用不只局限于此 缩点,说白了,就是建新图,之后的操作在新图上进行 自己看代码 #include<bits/stdc++.h> using names ...

  4. win10系统下把玩折腾DockerToolBox以及更换国内镜像源(各种神坑)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_149 2020年,这年头如果出去面试和面试官不聊几句Docker,都不好意思说自己是搞开发的.之前玩儿Docker都是在Mac系统 ...

  5. AgileFontSet迅捷字体设置程序

    AgileFontSet迅捷字体设置程序-用户手册  AgileFontSet的完整代码,参见 https://www.cnblogs.com/ybmj/p/11683291.html 1.程序特点和 ...

  6. selenium结合jmeter进行测试

    背景 现在市面上有众多成熟的性能测试工具,JMeter就是其中之一.可以通过JMeter快速将已有的Selenium代码以性能测试的方式组织起来,并使用JMeter丰富的报表功能展示测试结果. 相关链 ...

  7. win10下计算文件哈希值的方法

    cmd下使用certutil命令 使用方法: certutil -hashfile FILE_NAME ALGORITHM_NAME 支持的加密算法包括:MD2,MD4,MD5,SHA1,SHA256 ...

  8. Vue3中defineEmits、defineProps 是怎么做到不用引入就能直接用的

    最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势. 比如,下面这种 ...

  9. n【c#】委托：delegate 学习笔记

    类似于c/c++的指针,只不过c#的委托存储的是某个方法的调用,派生子System.Delegate

  10. 没写完。【java】IDEA-调教界面、设置语言、插件的使用

    步骤: 1.官方网站:https://www.jetbrains.com/idea/ (zip)版本:https://download.jetbrains.com.cn/idea/ideaIC-202 ...