纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现。如下:
向上的三角形
向右的三角形
向下的三角形
向左的三角形
实现它们的css分别是:
.top{
width:;
height:;
border-color: transparent transparent #333 transparent;
border-width: 6px;
border-style: solid;
}
.right {
width:;
height:;
border-color: transparent transparent transparent #333;
border-width: 6px;
border-style: solid;
}
.down {
width:;
height:;
border-color: #333 transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.left {
width:;
height:;
border-color: transparent #333 transparent transparent;
border-width: 6px;
border-style: solid;
}
其中用到的border-color:transparent是只有在奇葩的IE6下才不支持,所以可以放心使用
纯css实现三角形的更多相关文章
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 【面试题】纯css实现三角形,你知道如何实现吗?
纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 纯CSS绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
随机推荐
- hdu Co-prime
题意:求出在一个区间[A,B]内与N互质的个数 . 思路: 先求出n的质因子,然后求出与N的质因子不互质的个数然后总个数减去就是.用位运算二进制表示那个因子用到过,实现容斥原理.在1到n之间是c倍数的 ...
- Expanding Rods
http://poj.org/problem?id=1 #include<cstdio> #include<cstring> #include<cmath> #in ...
- POJ2251 Dungeon Master(bfs)
题目链接. 题目大意: 三维迷宫,搜索从s到e的最小步骤数. 分析: #include <iostream> #include <cstdio> #include <cs ...
- "红色病毒"问题 HDU 2065 递推+找循环节
题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=2065 递推类题目, 可以考虑用数学方法来做, 但是明显也可以有递推思维来理解. 递推的话基本就是状态 ...
- Android--广播BroadcastReceiver
前言 Android四大组件,Activity.Service.ContentProvider.BroadcastReceiver,除了BroadcastReceiver之外,其他的在之前的博客中都有 ...
- 利用C++11的function和bind简化类创建线程
问题引出 当在类中需要创建线程时,总是因为线程函数需要定义成静态成员函数,但是又需要访问非静态数据成员这种需求,来做若干重复性的繁琐工作.比如我以前就经常定义一个静态成员函数,然后定一个结构体,结构体 ...
- HDU2056(rectangles)
Rectangles Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- <微软的软件测试之道>读书笔记3
一.自动化的标准步骤: 1.环境初始化,并检查环境是否处于正确的状态,能否开始测试 2.执行步骤 3.判断结果,并将结果保存到其它地方以供检查分析 4.环境清理,清理本用例产生的垃圾(临时文件.环境变 ...
- [Javascript] Advanced Reduce: Flatten, Flatmap and ReduceRight
Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single a ...
- AndroidStudio文件夹结构视图讲解
近期,Google已经打算废弃Eclipse.而要大力支持他的亲生儿子AndroidStudio了,已经不在维护Eclipse了,也就是说在Eclipse上面出了什么问题.Google已经不在会管了, ...