<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. CF1656D K-good

    题意: 给定一个整数 \(n\),请找出一个大于等于 \(2\) 的整数 \(k\),使得 \(n\) 可以表示成 \(k\) 个除以 \(k\) 的余数互不相同的数之和. 注意\(k\)个除以 \( ...

  2. 递归概念&分类&注意事项和使用递归计算1-n之间的和

    递归 概述 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归 直接递归称为方法自身调用自己 简介递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 注 ...

  3. go更新腾讯云DNSPod的解析记录

    纯粹练手用的,大家轻喷 获取SecretId,SecretKey 打开腾讯云,登录之后打开https://console.cloud.tencent.com/cam/capi,然后新建密钥记录生成的S ...

  4. python template生成模板文件

    简介 在实际项目中,可能会出现需要批量生成特定格式或者特定内容的文件,因此,使用template文件生成便适用于在文件中大部分格式内容都是一致的,部分内容需要替换的情况. 模板文件 name: $NA ...

  5. 2535-springsecurity系列--关于授权角色“ROLE”前缀的问题

    版本信息 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...

  6. 用JavaScript写随机出一个颜色

    function changeColor(){ var r = parseInt(Math.random()*255) var g = parseInt(Math.random()*255) var ...

  7. Luogu3398 仓鼠找sugar (LCA)

    第一发lg[]没开够RE了,下了数据本地一直停止运行,还以为是dfs死了,绝望一交,A了... 判断\(x\)是否在路径\(s-t\)上,只需满足 \(dep_{x} >= dep_{LCA(s ...

  8. Apple Music 免费试用 2 个月

    下载地址:https://redeem.apple.com/am-genshin-impact-2mo-zh-cn?origin=&locale=zh-CN 使用指南 打开链接,点击" ...

  9. Qt 场景创建

    1 创建  Q t Widget Application 2 创建窗口 3 创建后的目录  创建完成后运行一下 4 导入资源  将res文件拷贝到 项目工程目录下 添加资源 选择一模版.Qt-Reso ...

  10. ViewGroup事件分发源码分析

    1.AndroidStudio源码调试方式 AndroidStudio默认是支持一部分源码调试的,但是build.gradle(app) 中的sdk版本要保持一致, 最好是编译版本.运行版本以及手机的 ...