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

很多人可能会用图片，事实上纯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实现带小角的对话框式下拉菜单的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  3. 【小技巧】只用css实现带小三角的对话框样式

    一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...

  4. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  6. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  7. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  8. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  9. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

随机推荐

  1. (转)asp.net(C#)手记之Repeater与两级菜单

    先来张图片说明下我们要实现的菜单: 这个菜单只实现了2级哈. 我采用的方法是嵌套2个Repeater. 先看下数据库中的表结构: 数据: 上代码: aspx: <asp:Repeater ID= ...

  2. （转）回车 执行button点击

    功能说明:当我们注册或者执行搜索时,输入内容后,不用单击按钮来执行按钮单击事件,而直接通过回车来执行按钮单击事件.只要在text框中onkeydown事件中加入执行按钮的onclick事件就OK了 代 ...

  3. 最全C语言笔记回顾

  4. poj2932 Coneology (扫描线)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Coneology Time Limit: 5000MS   Memory Lim ...

  5. css代码整理、收集

    整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的 ...

  6. Javascript 开发IDE

    俗话说,工欲行其事,必先利其器.开发的时候有一款好的IDE,对开发效率的提升是非常帮助的,在此强烈推荐Webstorm,官网网址http://www.jetbrains.com/webstorm/ 主 ...

  7. 关于curl_setopt参数的记录

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE) 其中true输出执行结果,false为不输出 fsockopen与curl_setopt请求的区别之一就是 ...

  8. Python 一路走来 HTML CSS Javascript

    前端三把利器 HTML          -标签 (成对写不容易忘记闭合)                     自闭和标签           标签里写个 xx=xx, 表示标签的属性       ...

  9. Python新手学习基础之运算符——算术运算符

    算术运算符 之前文章在介绍变量类型的时候,其实已经用过了很多算术符,比如+.-.*././/.** 等,除此之外,还有一个符号是之前内容没提到的,就是 % ,用来返回除法余数的运算符号. 假设有变量x ...

  10. C语言初学 比较五个整数并输出最大值和最小值2

    #include <stdio.h> int main() { int i,a[5]; int max = 0,min = 0; printf("输入5个整数(空格隔开) :\n ...