用边框属性制作三角形的原理详解 -

zsuczw

浏览: 51811 次
性别:
来自: 深圳

最近访客更多访客>>

fcuk

andseny

woshishiai

mmtye

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用边框属性制作三角形的原理详解

博客分类：

web前端

经常看到一些非常漂亮的Tip插件，有一个三角指向目标，非常好看。

之前一直以为上面的那个小三角是用背景图片做出来的，但是今天看了一个网页的源码才知道，使用纯边框属性也可以做出这样的效果来。经过一番搜索和思索之后，终于把其原理吃透了，特发博记下。

一切都还要从HTML元素的边框说起。

在HTML中，一个元素可以具有边框（border）、内边距（padding）、外边距（margin）。

当元素的宽度和高度都不为0时，border呈现出一个四方形环绕在内容的四周。但是当元素的高度和宽度都为0时，情况就变得不同了。Magic Happens！

因为没有高度和宽度（指内容的高度和宽度），元素的四条边会重叠在一起，如下所示：

假设四条边都是一个矩形，那么4条边描述如下：

left-border：（1，2，3，8）

right-border: (4，5，6，7）

top-border: （1，8，7，6）

bottome-border: （2，3，4，5）

因为(1,8)组成的区域是top-border和left-border的重叠区域，因此它们各占一般，以对角线平分，因此标号为8的三角区域属于top-border，标号为1的三角区域属于left-border。其它区域类似。因此实际上四条边的构成是：

left-border：（1，2）

right-border: (5，6）

top-border: （8，7）

bottome-border: （3，4）

它们都是三角形。如果其它的三边都为透明，那么我们就能得到一个三角形。由于没有使用图片，因此能减少流量，实现也非常简单，推荐大家使用。

最后给出第三张图的html代码（chrome下验证正确显示）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        position: relative;
        padding: 100px;
    }
    .show {
        border-left: 200px solid #BAC36E;
        border-right: 200px solid #BAB26E;
        border-top: 200px solid #ABB26E;
        border-bottom: 200px solid #BAB2E6;
        width: 0;
        height:0;
    }
</style>
</head>
<body>
    <div class="show"></div>
    <div style="width:400px;height: 1px;position: absolute; top: 300px;border-top:1px dashed red;"></div>
    <div style="height:400px;width: 1px;position: absolute; left: 300px;top:100px;border-left:1px dashed red;"></div>
    
    <p style="position: absolute;left:150px;top:200px;">1</p>
    <p style="position: absolute;left:150px;top:350px;">2</p>
    <p style="position: absolute;left:250px;top:400px;">3</p>
    <p style="position: absolute;left:350px;top:400px;">4</p>
    <p style="position: absolute;left:425px;top:350px;">5</p>
    <p style="position: absolute;left:425px;top:250px;">6</p>
    <p style="position: absolute;left:350px;top:150px;">7</p>
    <p style="position: absolute;left:200px;top:150px;">8</p>
</body>
</html>