CSSborder制作小三角形
#cssborder制作小三角形
1.原理是CSS盒模型
一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
– 调整宽度大小可以调节三角形形状.
2.矩形
设置盒子的宽高度, 及上下左右边框
div {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
3.小三角形
设置盒子宽高为0,然后设置边框颜色,其中一边设置颜色,余下3种颜色设置为透明(或者设置为和背景色相同的颜色).
div {
height:0;
width:0;
overflow: hidden;/* 这里设置overflow, font-size, line-height */
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-color:#FF9600 transparent transparent transparent;
border-style:solid;
border-width:20px;
}
注意:IE6下不支持透明
解决方法:设置余下三条边的border-style为dashed,即可达到透明的效果
4.上面我们画的小三角的斜边都是依靠原来盒子的边, 还有另外一种形式的小三角, 就是斜边在盒子的对角线上
div {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 #3366ff transparent transparent;
border-style:solid solid dashed dashed;
border-width:40px 40px 0 0 ;
}
保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.
CSSborder制作小三角形的更多相关文章
- No image!使用border-color属性来制作小三角形
border属性在项目中使用的还是蛮频繁的.例如页签.按钮这样的. border简写属性是按照如下属性设置的: border:border-width/border-style/border-colo ...
- 理解使用before,after伪类实现小三角形气泡框
先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...
- 使用CSS3制作网站常用的小三角形
现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过css3实现的小三角效果. 先上htm ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
- ireport制作小技巧
ireport制作小技巧 首先ireport中大小写问题: 1.parameter中如果小写,引用也小写 2.$F{},一般都大写 3.子报表中引用父报表中查询出来的值时,只需要小写即可,即在子报表的 ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)
1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可. 一下是用法总结: 本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧. ...
随机推荐
- uva10129 PlayOnWords(并查集,欧拉回路)
判断无向图是否存在欧拉回路,就是看度数为奇数的点有多少个,如果有两个,那么以那分别两个点为起点和终点,可以构造出一条欧拉回路,如果没有,就任意来,否则,欧拉回路不存在. 首先用并查集判断连通,然后统计 ...
- Spark 配置整理
Spark 的配置有很多,这里一方面总结一下官方文档中的内容,一方面将网上查到的资料中用到的针对特定问题的配置整理一下. 先看一下官网的配置:http://spark.apache.org/docs/ ...
- Mycat实现读写分离、分库分表
系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理本身优化也是非常重要的.主从.热备.分表分库等都是系统发展迟早会遇到的技术问题问题.Mycat是一 ...
- python零基础学习开篇
我是某工业大学的一名博士,研究方向是基于人脸的模式识别.很遗憾,毕业后没有继续从事图像处理中模式识别相关研究.多种原因进入了一家国企单位,从事交通方面工作.工作2年中一直迷茫,没有在工作岗位中找到自己 ...
- JS与 JSON(一个菜鸟的不正经日常)
今天学习了json的一些知识, 1 . 什么是json 1.1 JSON 英文全称 JavaScript Object Notation. 1.2 JSON 是一种轻量级的数据交换格式,用于存储和 ...
- 创建自定义 Estimator
ref 本文档介绍了自定义 Estimator.具体而言,本文档介绍了如何创建自定义 Estimator 来模拟预创建的 Estimator DNNClassifier 在解决鸢尾花问题时的行为.要详 ...
- Centos7系统下安装Docker
1.确定你的Linux系统是Centos7 命令:cat /etc/redhat-release 2.yum安装gcc相关 1.配置好Centos7能上外网. 2.yum -y install gcc ...
- Confluence 导出为 PDF 格式 - 导出多个页面或者整个空间
使用 Confluence 的空间导出功能,你可以将多个页面或者整个 Confluence 站点转换为 PDF 文件. 希望使用空间导出功能,你需要 导出空间(Export Space)权限.请查看 ...
- python-matplotlib-lec0
直奔主题吧..以下是对matplotlib画图的简单讲解,代码已测试. win7 + pycharm + python 2.7 参考文档: http://old.sebug.net/paper/boo ...
- 【实验吧】编程循环&&求底运算
要好好学写脚本!!! 循环: 题目介绍 给出一个循环公式,对于一个整数n,当n为奇数时,n=3n+1,当n为偶数时,n=n/2,如此循环下去直到n=1时停止. 现要求对两个整数i = 900.j = ...