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

很多人可能会用图片，事实上纯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. django: template using & debug

    模板的作用方法有如下三种: blog/views.py: from django.template import loader, Context, Template from django.http ...

  2. iOS_SN_UITableView的优化

    1.提前计算并缓存好高度(布局),因为heightForRowAtIndexPath:是调用最频繁的方法. 2.异步绘制,遇到复杂界面,遇到性能瓶颈时,可能就是突破口. 3.滑动时按需加载,这个在大量 ...

  3. zepto源码研究 - deferred.js（jquery-deferred.js）

    简要:zepto的deferred.js 并不遵守promise/A+ 规范,而在jquery v3.0.0中的defer在一定程度上实现了promise/A+ ,因此本文主要研究jquery v3. ...

  4. ICP编程软件配置（烧写KEIL编译后的bin文件）

    1. 安装NuMicro_ICP_Programming_Tool_1.29.6425软件 2. 打开软件后选择目标芯片后点击“连接”按钮 3. 添加程序 4. 点击设定按钮进行设定 5. 点击开始 ...

  5. shell中命令的执行流程

    在shell中,一个命令有3中写法: 1 可以直接写(Normal Command) 2 可以放在双引号中("Command") 3 可以放在单引号中('Comand') 这3中写 ...

  6. Mysql 储存过程以及 python callproc调用

    一.存储过程(stored procedure) 存储过程将存入的一系列SQL语句进行预编译,执行并存放在数据库中,之后如果需要使用sql语句对这一组sql进行访问时可以直接提取(很好理解 存储过程就 ...

  7. MediaWiki基本设置

    1.左侧导航栏设置 在右上角搜索栏中输入“mediawiki:sidebar” 确认后进行编辑(需要以站长或管理员身份登录). 格式: *导航栏名称一 **链接一地址|链接一名称 **链接二地址|链接 ...

  8. MySQL 数据库操作命令汇总

    此文全部都是基本的数据库语言 1.登陆到mysql >mysql -h hostname -u username -p 然后等待系统提示输入密码即可登陆.如果想在登陆的时候就选择好数据库,可以使 ...

  9. math.h中的常量

    类似于Matlab中经常用到的一些常量,C++里边也是有的.(经查源文件无意中看到) 写入如下代码: #include<iostream> #include<iomanip> ...

  10. smarty 基本介绍及示例

    什么是smarty? Smarty是一个使用PHP写出来的模板引擎,是业界最著名的PHP模板引擎之一.Smarty分离了逻辑代码和外在的内容,提供一种易于管理和使用的方法,用来将原本与HTML代码混杂 ...