纯CSS实现带小角的对话框式下拉菜单

最近公司首页样式重写，头部下拉菜单改为了带小角的对话框式下拉菜单：

很多人可能会用图片，事实上纯CSS就能够实现：

HTML:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>CSS画对话框小三角</title>
</head>
<body>
<div class="triangle"></div>    
</body>
</html>

CSS:

div.triangle{
        width: 0;
        height: 0;
        border-top: 120px solid red;
        border-right: 120px solid green;
        border-bottom: 120px solid blue;
        border-left: 120px solid yellow;
    }

效果：

这样每一个border就成了一个三角形。

接着我们把其中三条边的颜色设置为透明：

div.triangle{
        width: 0;
        height: 0;
        border-top: 120px solid transparent;
         border-right: 120px solid transparent;
        border-bottom: 120px solid blue;
        border-left: 120px solid transparent; 
    }

然后就得到我们想要的单个三角形：

接着通过:before伪类和定位即可将小三角移到你想要的位置！

posted on 2016-05-25 13:32 练米兰阅读(857) 评论(0) 编辑收藏举报