CSS做下拉列表的倒三角方法

hikui posted @ 2012年1月10日 20:54 in css , 6645 阅读

最近做练习的时候要用到下拉列表,上面有个倒三角。当时用贴图的方法做的。因为我是一个新手,所以不知道别人普遍怎么做,今天看了一眼淘宝的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>

效果:

那么,只要把左右和下面的border颜色设为和背景色一样,就出现倒三角效果了。

不过显然,这个办法限制比较大,只有在纯色箭头和纯色背景时才能用。

創用 CC 授權條款
本著作係採用創用 CC 姓名標示 2.0 通用版 授權條款授權.
Avatar_small
λ 说:
2012年1月10日 22:37

假如把「▲」用rotate旋转一下就好了,不过CSS3的Rotate和transform:rotate好像还不太多浏览器支持。
「▼」也是有的,&#9660;

Avatar_small
λ 说:
2012年3月28日 19:39

这篇文章有说,只设左右和底部的颜色就可以了(别忘了透明transparent)
http://coolshell.cn/articles/6913.html

书生Maple 说:
2014年9月05日 13:34
  1. .triangle{
    width:0;
    height:0;
    line-height: 0;
    font-size:0;
    border:20px solid #da2f10;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-bottom:20px solid transparent;
    }
  2. 兼容IE8,IE8一下要用其他方法了

 


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter