纯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:;

        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伪类和定位即可将小三角移到你想要的位置！

巴特西

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

最新文章

热门文章