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

最新推荐文章于 2024-01-16 22:33:40 发布

LYZ1148880644

最新推荐文章于 2024-01-16 22:33:40 发布

阅读量276

点赞数

原文链接：http://www.cnblogs.com/forzalianjunting/p/5526692.html

版权

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

很多人可能会用图片，事实上纯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; 
    }