在网页中，你在很多地方都能看到倒三角，比如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. Java study 2:The note of studying Socket which based TCP

    TCP concept: 传输控制协议(Transmission Control Protocol, TCP)是一种面向连接(连接导向)的.可靠的.基于字节流的运输层(Transport layer) ...

  2. 如何让低版本的IE浏览器（IE6/IE7/IE8）支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  3. 解决mac上Android开发时出现的ADB server didn't ACK

    mac 上adb连接不到android手机可以参考:这里 xxxdeMacPro:~ xxx$ adb start-server * daemon not running. starting it n ...

  4. visual studio中验证控件的使用

    1.RequiredFieldValidator:验证一个必填字段,如果这个字段没填,那么,将不能提交信息. RequiredFieldValidator控件中,主要设置三个属性: (1)ErrorM ...

  5. 史上最强NDK入门项目实战

    目标: 利用NDK生成SO库,使用SO库进行JNI调用,在Android sdcard创建文件并写入数据. 工具: NDK1.5 R1, android SDK1.5 R1, SDCARD, Ecli ...

  6. phpcms v9 get调用标签整理

    常见的phpcms标签调用  1.调用本系统单条数据(调用ID为1的信息,标题长度不超过25个汉字,显示更新日期): "select * from phpcms_content where  ...

  7. sphinx（coreseek）——1、增量索引

    首先介绍一下     CoreSeek/Sphinx的发布包 indexer: 用于创建全文索引;    search: 一个简单的命令行(CLI) 的测试程序,用于测试全文索引;    search ...

  8. openshif ssh proxy

    最近google又被墙了.没办法 1:注册一个openshift账号.申请注册一个app,获取一个免费主机.   https://www.openshift.com/ 2:去PuTTY官方网站下载pL ...

  9. Java Web开发介绍

    转自:http://www.cnblogs.com/pythontesting/p/4963021.html Java Web开发介绍 简介 Java很好地支持web开发,在桌面上Eclipse RC ...

  10. operation 多线程

    2.Cocoa Operation 优点:不需要关心线程管理,数据同步的事情.Cocoa Operation 相关的类是 NSOperation ,NSOperationQueue.NSOperati ...