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

很多人可能会用图片，事实上纯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. html hack 列表

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...

  2. 关于CSRF攻击及mvc中的解决方案 [ValidateAntiForgeryToken]

    http://blog.csdn.net/luck901229/article/details/8261640

  3. eclipse频繁崩溃退出

    1.出现下面的崩溃情况,并且改变内存大小都没有用,而且总是生成下面两个错误日志文件: 解决: 在eclipse.ini文件里面添加一行 -XX:-UseLoopPredicate 2.eclipse崩 ...

  4. 在Silverlight中打开网页的几种方法

    HtmlPage.PopupWindow HtmlPopupWindowOptions option = new HtmlPopupWindowOptions(); option.Directorie ...

  5. Java中int和String互相转换的多种方法

    1 如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([ ...

  6. Symfony2中的设计模式——装饰者模式

    装饰者模式的定义  文章链接:http://www.hcoding.com/?p=101 个人站点:http://www.hcoding.com/ 在不必改变原类文件和使用继承的情况下,动态地扩展一个 ...

  7. 安装Visual Studio 2010之后怎样安装MSDN Library

    这篇博客参考自:http://justargon.blog.163.com/blog/static/21394413020134100737688/ MSDN2010安装及使用(MSDN Librar ...

  8. 基于异步的MVC webAPI控制器

    MVC – Task-based Asynchronous Pattern (TAP) – Async Controller and SessionLess Controller Leave a re ...

  9. android获取屏幕宽高与获取控件宽高

    获取屏幕宽高 // 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素 ...

  10. How to run Tomcat without root privileges? 常规用户使用tomcat的80端口

    How to run Tomcat without root privileges? 1. The best way is to use jsvc, available as part of the  ...