1、新建一个元素，将它的宽高都设置为0；然后通过设置border属性来实现三角形效果，下面是css绘制三角形的原理：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

      .caret{

  height:0;/*将宽高都设置为0*/

  width:0;

  border:100px solid #000;

  border-color:red green yellow blue;

}

p{color:red;}

    </style>

</head>

<body>

<div class="caret"></div>

<p>

 将宽高都设置为0<br/>

 border-color:red green yellow blue;将变宽四个方向颜色设置成不同的颜色以便观察

</p>

</body>

</html>

效果:(为了jsfiddle防止被屏蔽,上面已插入了源代码)

从上面的效果可以看到，四个三角形拼成了一个正方形，我们只要把其中一个想要的三角形保留下来，其他的设置为透明的，就可以达到想要的效果了；

如border-color：red transparent transparent transparent；就能看到一个红色三角形

效果：

但是ie6不支持transparent，所以没有透明效果，这就需要把border-style：solid dashed dashed dashed；实现了透明效果；

2、如果要实现直角对着45度斜线方向的三角形，可以将两个三角形拼在一起来实现；

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

      .caret{

  height:0;/*将宽高都设置为0*/

  width:0;

  border:100px solid #000;

  border-color:red green transparent transparent;

  border-style:solid solid dashed dashed;

}

p{color:red;}

    </style>

</head>

<body>

<div class="caret"></div>

<p>

 border-color:red green transparent transparent transparent;

 border-style:solid solid dashed dashed;

</p>

</body>

</html>

效果:

注意：此方法在ie6中，会有个行高撑开了，需要把行高设置为0，line-heiht:0；

下面用css绘制三角形的原理来绘制一个三角形气泡

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>除去列表最后一个li的底边框</title>

    <style>

        body,p{margin:0;padding:0;}

        #container{

            margin:0 auto;

            position:relative;

            width:400px;

            height:100px;

            border:10px solid #81A7FF;

        }

        #caret{

            position:absolute;

            width:50px;

            height:50px;

            left:100px;

            bottom:-50px;

        }

        .triangle1,.triangle2{

            display:block;

            height:0;/*将宽高都设置为0*/

            width:0;

            line-height:0;

            border-style:solid dashed dashed dashed;

        }

        .triangle1{

            border-width:50px;

            border-color:#81A7FF transparent transparent transparent;

        }

        .triangle2{

            position: absolute;

            top:-14px;/*这个数据三角函数是计算出来的*/

            border-width:50px;

            border-color:#fff transparent transparent transparent;

        }

        p{color:#81A7FF;text-align: center;line-height: 100px;}

    </style>

</head>

<body>

<div id="container">

    <div id="caret">

        <span class="triangle1"></span>

        <span class="triangle2"></span>

    </div>

    <p>

        css绘制三角形气泡

    </p>

</div>

</body>

</html>

效果：

.triangle2的top值不能直接是10px，不然显示的三角形边框会小于10，会导致气泡部分小于容器div元素的边框（border-width）；top值的计算：（border-width）*(border-width)/(（border-width）*sin45)

css绘制三角形原理的更多相关文章

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

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

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

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

  3. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  4. CSS绘制三角形和箭头

    <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...

  5. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  6. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  7. 用CSS绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

  8. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  9. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

随机推荐

  1. Oracle 服务手动启动关闭

    在windows7中安装完Oracle11g之后会出现一下七种服务:可通过运行->services.msc查看. 其中各个服务名称中的ORCL或orcl为SID即System IDentifie ...

  2. 转载扩展Windows Mobile模拟器存储空间的方法

    扩展Windows Mobile模拟器存储空间的方法 在Windows Mobile应用程序开发的初期,可以使用SDK自带的模拟器来进行调试,这给我们开发人员提供了一种方便的途径.一般的应用程序,占用 ...

  3. JTA 深度历险 - 原理与实现

    转自http://www.ibm.com/developerworks/cn/java/j-lo-jta/ 在 J2EE 应用中,事务是一个不可或缺的组件模型,它保证了用户操作的 ACID(即原子.一 ...

  4. java调用Linux命令报错：java.io.IOException: Cannot run program "ps": CreateProcess error=2, ?????????

    在idea里面,java代码:Runtime.getRuntime().exec("ps -aux") 是因为默认是用windows平台运行了,所以报错,得改成调用Linux平台运 ...

  5. 让IE浏览器支持CSS3圆角属性的方法

    绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...

  6. SpringMVC入门配置和简单实现

    web.xml的配置 <!-- springmvc中央控制器 --> <servlet> <servlet-name>springmvc</servlet-n ...

  7. chrome浏览器root用户运行

    vim /usr/bin/google-chrome 58 exec -a "$0" "$HERE/chrome" "$PROFILE_DIRECTO ...

  8. DSO动态加载PHP模块到Apache服务器

    PHP在Linux/Unix平台上经常与Apache搭配使用,在安装PHP时,有三种安装方式可供选择:静态模式.动态模式(DSO).CGI二进制模式. 由于易于维护和升级,我强烈建议以DSO方式安装P ...

  9. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  10. Java虚拟机8：虚拟机性能监控与故障处理工具

    前言 定位系统问题的时候,知识.经验是基础,数据是依据,工具是运用知识处理数据的手段.这里说的数据包括:运行日志.异常堆栈.GC日志.线程快照.堆转储快照等.经常使用适当的虚拟机监控和分析的工具可以加 ...