css倒三角的几种实现方式
2024-10-21 04:14:19
在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等。大家有几种方式来实现呢?
1.BASE64编码 图片
假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案。
有用的工具
http://webcodertools.com/imagetobase64converter
http://image2base64.wemakesites.net/
优点
- 你可以按照自己的思想设计阴影,渐变等,然后对其进行转换编码
缺点
- 你需要使用一个图片编辑软件去设计
- 对于较大的图片,最终转换成字符串占用大小会很大
- 旧版本的浏览器,如:IE6/IE7是不兼容的
2.CSS 边框
<html>
<title>倒三角演示代码1</title>
<head>
<style type="text/css">
.triangleDiv{
border-color: #57af1a #fff #fff #fff;
border-style: solid;
border-width: 100px 60px 0 60px;
height: 0;
width: 0;
}
</style>
</head>
<body>
<div class='triangleDiv'></div>
</body>
</html>
优点
- 很容易的通过修改一些CSS代码属性值而更改颜色和大小
- 这是一个跨浏览器的解决方案。
缺点
- 这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
- 请记住,IE6是不支持透明边界的-如果你关心这个问题
- 如果你使用火狐浏览器,要知道,CSS的“透明”有时可能不会是透明的
3.Unicode字符
<html>
<title>倒三角演示代码2</title>
<head>
<style type="text/css">
.triangleDiv{
font-size: 18px;
color: #f7931d;
text-shadow: 0 1px 1px rgb(99, 95, 92);
}
</style>
</head>
<body>
<span class='triangleDiv'>▼</span>
</body>
</html>
优点
- 它是一个跨浏览器的技术
- 您可以使用CSS3的text-shadow属性添加阴影。
缺点
- 不能使用太多的CSS3效果,除了使用文字阴影。
- 在所有的浏览器,这是相当不可能实现像素完美。
4.CSS 旋转正方形
<html>
<title>倒三角演示代码3</title>
<head>
<style type="text/css">
.parentDiv {
height: 14px;
overflow: hidden;
} .triangleDiv {
position: relative;
height: 20px;
width: 12px;
top: -12px;
left: 7px;
background: #0c0c0c;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="triangleDiv"></div>
</div>
</body>
</html>
优点
- CSS3阴影,渐变等可以更多的使用
缺点
- 这个解决方案不是跨浏览器的,首先是因为CSS3旋转。
最新文章
- Android版的菜谱客户端应用源码完整版
- 【转】ListView学习笔记(一)——缓存机制
- wpf 窗体内容旋转效果 网摘
- 我的c++学习(7)引用和复制构造函数
- Sql Server 深入的探讨锁机制
- [HDOJ5542]The Battle of Chibi(DP,树状数组)
- 【Binary Tree Zigzag Level Order Traversal】cpp
- LeetCode_Set Matrix Zeroes
- OSCHina技术导向:Java轻量web开发框架——JFinal
- Hibernate操作Clob数据类型
- MSDN官方XmlSerializer类导致内存泄漏和性能低
- python中input()与raw_input()的区别到底是啥?-----marsggbo原创作品为你解答
- Asp.Net WebApi Swagger终极搭建
- gdb cheat sheet
- [Swift]LeetCode848. 字母移位 | Shifting Letters
- Nios II Host-Based File System
- C/C++基础----关联容器
- Linux下GoAccess的安装与全部用法
- linux命令(46):批量更改文件后缀,文件名
- Pytoch 抽取中间层特征方法