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

很多人可能会用图片，事实上纯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. FeatureClass对象

    概述: 在讲述FeatureClass对象之前,首先说明与FeatureClass对象相关的对象: Table对象,是不具有空间信息的二维表,是一张仅能在ArcMap的Table Of Content ...

  2. Geodatabase - 打开栅格数据

    打开栅格数据 和打开要素类的方式类似,打开栅格数据集需要用 IRasterWorkspace,如 //获得栅格工作空间(普通目录). public ESRI.ArcGIS.DataSourcesRas ...

  3. ORACLE基本SQL语句-查询篇

    一.普通查询 /*查询表数据*/select * from STU /*取出前3行数据*/select * from stu where ROWNUM<=3 /*模糊查询*/select * f ...

  4. 64位Windows 7平台安装32位Timesten，配置ODBC数据源

    问题: 由于系统版本原因,客户机只能安装32位的Timesten,但客户机的平台是64位的win 7,安装完成后按照常规的控制面板->管理工具->数据源(ODBC)打开的ODBC数据源管理 ...

  5. MRC和ARC混编

    iOS5.0以后就开始可以使用ARC( Automatic Reference Counting:自动引用计数)来代替之前的MRC(Manual Reference Counting:人工引用计数). ...

  6. MyEclipse笔记（2）：debug的使用

    对于程序代码而言,学会调debug是重中之重,依此,掌握该技巧 以算1到50的和的代码为例: package com.front.action; public class debug { public ...

  7. polya定理小结

    polya的精髓就在与对循环节的寻找,其中常遇到的问题就是项链染色类问题. 当项链旋转时有n种置换,循环节的个数分别是gcd(n, i); 当项链翻转时有n种置换,其中当项链珠子数位奇数时,循环节的个 ...

  8. 分享QQ第三方登陆SDK

    主要是考虑到QQ的PHP SDK写的真是太烂了,纯属是普及API知识,而不是到手就可以部署的类库..反正自己都写了一个了,就拿出来分享下.. 什么也不多说,直接上代码. Qq_sdk.php < ...

  9. opencv 批量图像读写

    处理图像数据集时通常要读写整个文件夹里的图像,这时就会用的图像的批量读写. 比较常用的方法就是生成一个包含所有图像的txt列表 生成txt文件的方法如下: 利用cmd进入dos 利用路径进入指定文件夹 ...

  10. 树莓派设置固定ip

    2016发布的rasbian采用的网络机制是dhcpcd: 不能使用以前的修改配置文件/etc/network/interfaces: 新的配置方式保持/etc/network/interfaces不 ...