用CSS实现文本框尖角
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊!
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码:
<div class="arrow"></div>
.arrow {
width:;
height:;
font-size:;
border:solid 10px #000;
}
这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:
.arrow {
width:;
height:;
font-size:;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
我们发现,原来当div的宽度和高度都是0的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:
<div class="send">
<div class="arrow">
</div>
</div>
body {
background:#4D4948;
} .send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
} .send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:;
height:;
font-size:;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
大功告成,效果如下:
文章转载:http://www.w3clog.com/436.html
用CSS实现文本框尖角的更多相关文章
- css中文本框与按钮对不齐解决方案
我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...
- css控制文本框的只读属性的方法
css 封装整个只读文本框的属性: .TextBoxReadOnly{ border:1px solid #C0C0C0; text-align:left; background-color:#D3D ...
- 百度前端笔试题目--css 实现一个带尖角的正方形
今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...
- css装饰文本框input
在web程序前端页面中,<input>恐怕是用的最多的html元素了,各个需要录入信息的场合都会用到它,一般都会用css来修饰一下使得它更好看. 原始的不加修饰的文本框像下面,有些单调,页 ...
- css实现文本框和下拉框结合的案例
html 代码部分 <div id="list-name-input" class="list-name-input"> <select ty ...
- 通过CSS使文本框中输入的小写字母变大写字母
在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...
- css三角形文本框
<style type="text/css"> .triangle{/* 三角形图片位置 */ background-image: url(img/traintop.p ...
- (转载) css实现小三角(尖角)
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
- css细节:尖角处理
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
随机推荐
- 旅游[SPFA或是最小生成树][简单算法的灵活题]
旅行 [问题描述] Z 小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z 小镇附近共有N 个景点(编号为1,2,3,…,N),这些景点被M 条道路连接着,所有道路都是双向的,两个景点之间 ...
- Excel报表开发(主要讲Excel的导入和导出)
一.Excel数据导入 连接字符串Excel2003版: OleDbConnection conn = new OleDbConnection("provider=Microsoft.Jet ...
- 迟到的 WPF 学习 —— 路由事件
1. 理解路由事件:WPF 通过事件路由(event routing)概念增强了传统的事件执行的能力和范围,允许源自某个元素的事件由另一个元素引发,例如,事件路由允许工具栏上的一个按钮点击的事件在被代 ...
- 认知的SSH
认知的SSH 实习了三个月,对着SSH有着一定的认识了,就以自已认识的大概思路写一篇文章吧,留给以后的自已,也恳请各位博友们如果看到我的认识有过错的地方能帮我指正过来! 在写正文之前,先说说我这段时间 ...
- cocos2d(CCSprite绑定不规则刚体与精灵一起移动)
对于不规则的精灵我们可以借助PhysicsEditor来制作shape , 对于地图可以使用Tiled软件制作瓷砖地图. 今天主要记录一下如何把CCSprite与不规则刚体进行绑定,然后一起移动 // ...
- Android开发效率的小技巧
提高eclipse使用效率(二) 提高Android开发效率的小技巧 XML文件的代码提示 adt中也有xml文件的代码提示,为了让提示来的更加猛烈,我们还要设置一下 打开eclipse - Wi ...
- HashMap源码剖析
HashMap源码剖析 无论是在平时的练习还是项目当中,HashMap用的是非常的广,真可谓无处不在.平时用的时候只知道HashMap是用来存储键值对的,却不知道它的底层是如何实现的. 一.HashM ...
- 什么时候用spring
论公司spring的滥用 这个公司每个项目用不同的一套开发框架,实在忍不住拿一个出来说说事.
- 搭建基于SSI(struts2,spring,ibatis)的javaEE开发环境
搭建基于SSI(struts2,spring,ibatis)的javaEE开发环境 最近有很多人不知道如何搭建基于SSI(struts2,spring,ibatis)的J2EE开发环境,这里给大家一个 ...
- 数模学习笔记(五)——BP神经网络
1.BP神经网络是一种前馈型网络(各神经元接受前一层的输入,并输出给下一层,没有反馈),分为input层,hide层,output层 2.BP神经网络的步骤: 1)创建一个神经网络:newff a.训 ...