CSS做下拉列表的倒三角方法
hikui
posted @ 2012年1月10日 20:54
in css
, 11930 阅读
最近做练习的时候要用到下拉列表，上面有个倒三角。当时用贴图的方法做的。因为我是一个新手，所以不知道别人普遍怎么做，今天看了一眼淘宝的css，真是出乎意料啊。
效果图：
这个效果的原理很简单：对一个元素的四个面都设置border时，不同方向上的border衔接之处是呈45度切面的，只要随便拿一个元素加上一个很粗的border就可以看出来了。那么当元素高宽都为0，但是有一个非常粗的border的时候，就会出现4个三角形。
div{
border-color: #666666 blue red;
border-style: solid;
border-width: 14px;
font-size:0;
height: 0px;
line-height: 0;
width: 0px;
}
<body>
<div></div>
</body>
效果：
 - Komodo Edit 6.png)
那么，只要把左右和下面的border颜色设为和背景色一样，就出现倒三角效果了。
不过显然，这个办法限制比较大，只有在纯色箭头和纯色背景时才能用。
本著作係採用創用 CC 姓名標示 2.0 通用版 授權條款授權.
2012年1月10日 22:37
假如把「▲」用rotate旋转一下就好了，不过CSS3的Rotate和transform:rotate好像还不太多浏览器支持。
「▼」也是有的，▼
2012年3月28日 19:39
这篇文章有说，只设左右和底部的颜色就可以了（别忘了透明transparent）
http://coolshell.cn/articles/6913.html
2014年9月05日 13:34