<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. 淘淘蓝蓝的CSP-S神妙膜你赛2-淘淘蓝蓝喜欢01串 题解

    问题简述 给定\(n\)个盒子,每个盒子的容器为\(b[i]\),里面装有\(a[i]\)个物品.今有\(q\)组询问,每组询问给出一个正整数\(k(k<=n)\),已知一个盒子里的一件物品转移 ...

  2. Selenium自动化测试之Selenium IDE

    简介 Selenium IDE 是实现Web自动化的一种便捷工具,本质上它是一种浏览器插件.该插件支持Chrome和Firefox浏览器,拥有录制.编写及回放操作等功能,能够快速实现Web的自动化测试 ...

  3. 6.13 NOI 模拟

    \(T1\ first\) \(bitset\)字符串匹配 \(yyds\) \(O(\frac{n^2}{w})\)就是正解! #include<bits/stdc++.h> #defi ...

  4. C#实现访问OPC UA服务器

    OPC UA服务器支持三种认证方式,分别是匿名认证.用户认证和证书认证.其中匿名认证安全等级最低,访问不做任何校验.用户认证访问时,OPC UA客户端需要提供用户名及密码认证,只有用户名和密码正确才允 ...

  5. 过年好，新一代大数据任务调度系统 - Apache DolphinScheduler 1.3.5 发布

    节后上班第一天,新一代大数据任务调度 - Apache DolphinScheduler(incubator) 就迎来了好消息 - 在社区 20 多位小伙伴的贡献与努力下,社区发布了 1.3.5 版本 ...

  6. C# 使用SIMD向量类型加速浮点数组求和运算（1）：使用Vector4、Vector<T>

    作者: 目录 一.缘由 二.使用向量类型 2.1 基本算法 2.2 使用大小固定的向量(如 Vector4) 2.2.1 介绍 2.2.2 用Vector4编写浮点数组求和函数 2.3 使用大小与硬件 ...

  7. Dart 异步编程（一）：初步认识

    由于 Dart 是单线程编程语言,对于进行网络请求和I/O操作,线程将发生阻塞,严重影响依赖于此任务的下一步操作. 通常,在一个阻塞任务之后还有许许多多的任务等待被执行.下一步任务需要上一步任务的结果 ...

  8. java单线程100%利用率

    容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 目前这个bug已经合入到了开源社区, 链接为 https://git ...

  9. identity4 系列————案例篇[三]

    前言 前文介绍了identity的用法,同时介绍了什么是identitySourece.apiSource.client 这几个概念,和具体案例,那么下面继续介绍案例了. 正文 这里用官网的案例,因为 ...

  10. 哔哩哔哩b站提取Cookie方法，bilibili获取Cookie教程

    大家可能对Cookie很陌生,甚至不知道是干嘛用,没关系,今天小编详细给大家讲解! Cookie是保存在客户端的纯文本文件,比如txt文件,所谓的客户端就是我们自己的本地电脑,当我们使用自己的电脑通过 ...