在网页中，你在很多地方都能看到倒三角，比如tooltips，下拉菜单等。大家有几种方式来实现呢？

1.BASE64编码 图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

优点

  • 你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

缺点

  • 你需要使用一个图片编辑软件去设计
  • 对于较大的图片，最终转换成字符串占用大小会很大
  • 旧版本的浏览器，如：IE6/IE7是不兼容的

2.CSS 边框

<html>

<title>倒三角演示代码1</title>

<head>

 <style type="text/css">

        .triangleDiv{

            border-color: #57af1a #fff #fff #fff;

            border-style: solid;

            border-width: 100px 60px 0 60px;

            height: 0;

            width: 0;

        }

    </style>

</head>

<body>

<div class='triangleDiv'></div>

</body>

</html>　　

优点

  • 很容易的通过修改一些CSS代码属性值而更改颜色和大小
  • 这是一个跨浏览器的解决方案。

缺点

  • 这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
  • 请记住，IE6是不支持透明边界的-如果你关心这个问题
  • 如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的

3.Unicode字符

<html>

<title>倒三角演示代码2</title>

<head>

 <style type="text/css">

        .triangleDiv{

            font-size: 18px;

            color: #f7931d;

            text-shadow: 0 1px 1px rgb(99, 95, 92);

        }

    </style>

</head>

<body>

<span class='triangleDiv'>▼</span>

</body>

</html>　　
　　

优点

  • 它是一个跨浏览器的技术
  • 您可以使用CSS3的text-shadow属性添加阴影。

缺点

  • 不能使用太多的CSS3效果，除了使用文字阴影。
  • 在所有的浏览器，这是相当不可能实现像素完美。

4.CSS 旋转正方形

<html>

<title>倒三角演示代码3</title>

<head>

    <style type="text/css">

        .parentDiv {

            height: 14px;

            overflow: hidden;

        }

        .triangleDiv {

            position: relative;

            height: 20px;

            width: 12px;

            top: -12px;

            left: 7px;

            background: #0c0c0c;

            -moz-transform: rotate(45deg);

            -webkit-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="parentDiv">

    <div class="triangleDiv"></div>

</div>

</body>

</html>　　

优点

  • CSS3阴影，渐变等可以更多的使用

缺点

  • 这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

css倒三角的几种实现方式的更多相关文章

  1. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  2. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  3. css左右布局的几种实现方式和优缺点

    记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定: html代码如下: <div class="parent" ...

  4. CSS隐藏元素的N种实现方式。

    1. width:0; 光有高度是不行的,还得有宽度.缺点文字隐藏不了,可以加个color:#fff和背景颜色一样就ok了,障眼法,迷惑人的,其实内容还在,如果有文字的话,还是可以触发点击事件的,这种 ...

  5. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  6. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. CSS3美化表单控件

    表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...

  2. maven mirror

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...

  3. 【转】WF事件驱动

    转自:http://www.cnblogs.com/Mayvar/category/315963.html 这系统的教程有代码可以下载 WF事件驱动(5) 摘要: 之前,我通过4篇文章介绍了在WF4中 ...

  4. 【转】Entity Framework教程

    转自:http://www.cnblogs.com/xray2005/category/189491.html   Entity Framework系列文章导航 摘要: 本节集合了Entity Fra ...

  5. C++序列化库的实现

    C++中经常需要用到序列化与反序列化功能,由于C++标准中没有提供此功能,于是就出现了各式各样的序列化库,如boost中的,如谷歌的开源项目,但是很多库都依赖其他库过于严重,导致库变得很庞大.今天来分 ...

  6. Tomcat环境变量的配置

    Tomcat web服务器 支持全部JSP以及Servlet规范 主要作用 是提供了一个可以让Jsp和Servlet运行的平台 tomcat环境变量设置 CATALINA_HOME : D:\bran ...

  7. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  8. [Python]更加Pythonic的多个List合并和Python的安利

    原题: https://segmentfault.com/q/1010000005904259 问题: 倘若存在 L=[ [1,2,3],[4,5,6],[7,8,9]] 这样的列表,如何把合并成[1 ...

  9. MySQL查询优化:连接查询排序limit

    MySQL查询优化:连接查询排序limit(join.order by.limit语句) 2013-02-27      个评论       收藏    我要投稿   MySQL查询优化:连接查询排序 ...

  10. Java中权限修饰符public、private、protected和default的区别

    1.public 可以修饰类.成员变量和成员函数,没有任何限制,同一个包中,或者不同包中的类都可以自由访问 2.private 可以修饰成员变量和成员函数,只能在本类中使用 3.default (不写 ...