最近公司首页样式重写，头部下拉菜单改为了带小角的对话框式下拉菜单：
很多人可能会用图片，事实上纯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:;
height:;
border-top: 120px solid red;
border-right: 120px solid green;
border-bottom: 120px solid blue;
border-left: 120px solid yellow;
}
效果：
这样每一个border就成了一个三角形。
接着我们把其中三条边的颜色设置为透明：
div.triangle{
width:;
height:;
border-top: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 120px solid blue;
border-left: 120px solid transparent;
}
然后就得到我们想要的单个三角形：
接着通过:before伪类和定位即可将小三角移到你想要的位置！