看到像上图这样的 tip 的小三角，你会怎么办？

切个图上去？恩，不错，简单，兼容性也一级棒，不但好控制，那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢？哈哈，那必须有啊，而且还不止一种呢：）

纯 CSS 做三角形的方法，目前我知道三种，分别是利用 border 属性，“◆”字符，和 CSS3 transfrom 做 45 度旋转实现的，CSS3的方法是在码头哥的博客上学到的，很感谢你们的分享，前端有你们更精彩！

1.利用 border 属性实现三角形

这个原理很简单，我我们先看下面的图，这是一个边框为 20px 的 div，看他的边框，是个梯形，变化会从这里开始。

CSS：

.triangle{

    width:30px;

    height:30px;

    border-width:20px;

    border-style:solid;

    border-color:#e66161 #f3bb5b #94e24f #85bfda;

}

好的，现在我把它的宽和高都设为 0，看看有什么变化。

四个边框都变成三角形了，现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了，推荐把边框设置成透明，这样拓展性更好。

注：IE6下把边框设置成 transparent 时会出现黑影，并不会透明，把 border-style 设置成 dashed 可以解决。

CSS：

.triangle{

    width:0;

    height:0;

    border-width:20px;

    border-style:solid dashed dashed dashed;

    border-color:#e66161 transparent transparent transparent;

}

如果我们想实现下图的效果该怎么办呢？很简单，做两个小三角，一个是背景色，一个是边框色，然后利用定位重叠在一起，记住他们的定位要相差一个像素。

HTML：

<div class="message-box">

  <span>我是利用 border 属性实现的</span>

  <div class="triangle-border tb-border"></div>

  <div class="triangle-border tb-background"></div>

</div>

CSS：

.message-box {

    position:relative;

    width:240px;

    height:60px;

    line-height:60px;

    background:#E9FBE4;

    box-shadow:1px 2px 3px #E9FBE4;

    border:1px solid #C9E9C0;

    border-radius:4px;

    text-align:center;

    color:#0C7823;

}

.triangle-border {

    position:absolute;

    left:30px;

    overflow:hidden;

    width:0;

    height:0;

    border-width:10px;

    border-style:solid dashed dashed dashed;

}

.tb-border {

    bottom:-20px;

    border-color:#C9E9C0 transparent transparent transparent;

}

.tb-background {

    bottom:-19px;

    border-color:#E9FBE4 transparent transparent transparent;

}

2.利用”◆“字符实现三角形

字符实现也是要用两个字符用绝对定位去模拟，只是它不能模拟出三角形，它是个菱形，然后露出半个头，底色又和背景色一样，看上去就像是个三角形了。。

注意：它的大小是由 font-size 决定的，width 和 height 都决定不了，但最好还是加上，这样各个浏览器去生成这个字符的时候能保持一致，我们去写绝对定位的时候就不用写 hack 了。

HTML：

<div class="message-box">

  <span>我是利用 ◆ 字符实现的</span>

  <div class="triangle-character tc-border">◆</div>

  <div class="triangle-character tc-background">◆</div>

</div>

CSS：

.message-box {

    position:relative;

    width:240px;

    height:60px;

    line-height:60px;

    background:#E9FBE4;

    box-shadow:1px 2px 3px #E9FBE4;

    border:1px solid #C9E9C0;

    border-radius:4px;

    text-align:center;

    color:#0C7823;

}

.triangle-character {

    position:absolute;

    left:30px;

    overflow:hidden;

    width:26px;

    height:26px;

    font:normal 26px "宋体"; // 字符的大小和字体也有关系哦！

}

.tc-border {

    bottom:-13px;

    color:#C9E9C0;

}

.tc-background {

    bottom:-12px;

    color:#E9FBE4;

}

3.利用 CSS3 transfrom 旋转 45 度实现三角形

先创建一个带 border 的 div ，设置好背景色和相邻的两个边框的颜色，然后选择 45 度，听着很简单是吗，但是利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案很头大，我是没看懂，有看懂的兄弟情赐教啊：）

注：IE6下无效。

HTML：

<div class="message-box">

  <span>我是利用 css transfrom 属性字符实现的</span>

  <div class="triangle-css3 transform ie-transform-filter"></div>

</div>

CSS：

.message-box {

    position:relative;

    width:240px;

    height:60px;

    line-height:60px;

    background:#E9FBE4;

    box-shadow:1px 2px 3px #E9FBE4;

    border:1px solid #C9E9C0;

    border-radius:4px;

    text-align:center;

    color:#0C7823;

}

.triangle-css3 {

    position:absolute;

    bottom:-8px;

    bottom:-6px;

    left:30px;

    overflow:hidden;

    width:13px;

    height:13px;

    background:#E9FBE4;

    border-bottom:1px solid #C9E9C0;

    border-right:1px solid #C9E9C0;

}

.transform {

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -o-transform:rotate(45deg);

    transform:rotate(45deg);

}

/*ie7-9*/

.ie-transform-filter {

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(

        M11=0.7071067811865475,

        M12=-0.7071067811865477,

        M21=0.7071067811865477,

        M22=0.7071067811865475,

    SizingMethod='auto expand')";

    filter: progid:DXImageTransform.Microsoft.Matrix(

        M11=0.7071067811865475,

        M12=-0.7071067811865477,

        M21=0.7071067811865477,

        M22=0.7071067811865475,

    SizingMethod='auto expand');

}
<html>

    <head>

        <style type="text/css">

        .test:before{

            content: '';

            width: 0;

            height: 0;

            border: 20px solid #FFF;

            border-top: 13px solid rgba(0, 0, 0, 0)!important;

            border-right: 13px solid rgba(0, 0, 0, 0)!important;

            border-left: 13px solid rgba(0, 0, 0, 0);

            left: 77.1%;

            top: 5.3%;

            position: absolute;

        }

        .test{

            width: 100px;

            height: 100px;

            margin:7em auto 0;

        }

        div{

            text-align: center;

        }

        body{

            background-color: #000;

        }

        </style>

    </head>

    <body>

        <div>

            <div class="test">

                border是20px,所以top right bottom left都是20，现在设置top right left是13而bottom不变是20就变成bottom是26(13+13) 高是20

            </div>

        </div>

    </body>

</html>

三种纯CSS实现三角形的方法的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  3. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  4. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  5. 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧

    在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...

  6. [转]SQL三种获取自增长的ID方法

     最新更新请访问: http://denghejun.github.io   SQL SERVER中的三种获得自增长ID的方法  这个功能比较常用,所以记下来以防自己忘掉. SCOPE_IDENTIT ...

  7. 三种dedecms调用相关文章的方法

    在文章的末尾或侧边栏添加相关文章可以提高用户的黏度,提高pv,增加se的好印象(哈哈),那么dedecms如何调用相关文章呢?有三种方法可以实现. 第一种dedecms调用相关文章的方法,用默认的li ...

  8. MySQL、SQLServer2000(及SQLServer2005)和ORCALE三种数据库实现分页查询的方法

    在这里主要讲解一下MySQL.SQLServer2000(及SQLServer2005)和ORCALE三种数据库实现分页查询的方法. 可能会有人说这些网上都有,但我的主要目的是把这些知识通过我实际的应 ...

  9. 三种计算c#程序运行时间的方法

    三种计算c#程序运行时间的方法 第一种: 利用 System.DateTime.Now // example1: System.DateTime.Now method DateTime dt1 = S ...

随机推荐

  1. jQuery弹出层_点击自身以外地方关闭弹出层

    <html> <style> .hide{display:none;} </style> <script type="text/javascript ...

  2. [C#]异步委托使用小计

    APM(=Asynchronous Programming Model(=异步编程模型)) 使用 IAsyncResult 设计模式的异步操作是通过名为 Begin操作名称 和 End操作名称 的两个 ...

  3. 3DMAX 建立场景 工作流程

    建立3D渲染首先建立房型.毕竟我们在做的是三维房间的渲染.建立房型线有几个环节都要用到 我们看一眼最终的渲染效果. 利用我们第一步建立的房型线做模型 房型线通过膨胀变成墙壁 再通过房型线生成屋顶天花和 ...

  4. window.onresize 多次触发的解决方法

    用了window.onresize但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法. 之前做一个扩展,需要在改变窗口大小的时候保证页面显示 ...

  5. LOL(英雄联盟)系统鼠标速度锁定工具

    最近习惯将系统的鼠标速度降低, 而提高鼠标硬件DPI来提升移动准确度, 但是LOL的客户端每次启动进入游戏后就会还原系统鼠标的移动速度, 我把情况反应给腾讯,没想到他们一点都不重视, 建议我只改游戏里 ...

  6. Python3实现连接SQLite数据库的方法

    本文实例讲述了Python3实现连接SQLite数据库的方法,对于Python的学习有不错的参考借鉴价值.分享给大家供大家参考之用.具体方法如下: 实例代码如下: ? 1 2 3 4 5 6 7 8 ...

  7. Inspiron 14 7000 系列 (7447) 游匣14 拆机图

    Inspiron 14 7000 系列 (7447)   游匣14 拆机图   游匣配置不多说,i5起步,标配4G GTX850M显卡,这么霸道的配置给我玩扫雷肯定不卡.配置高功耗就大,不过游匣的散热 ...

  8. html 各个标签初始化

    html,body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,span,input{  margin:0;padding:0;}body{font:12px/1.5em " ...

  9. 加密算法 - RSA算法一

    RSA算法原理(一)  声明: 本文转自 -- 作者: 阮一峰 (http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html) ...

  10. WiFi无线模块学习1——HLK-M30使用

    产品概述 概述: 通过该模块,传统的串口设备在不需要更改任何配置的情况下,即可通过Internet 网络传输自己的数据.为用户的串口设备提供完整快读的解决方案. 技术参数 可查询技术规格表 主要应用领 ...