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

时间 2019-11-08

标签边框属性制做三角形的原理详解繁體版

原文原文链接

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

使用纯边框属性也能够作出这样的效果来。html

一切都还要从HTML元素的边框提及。插件

在HTML中，一个元素能够具备边框（border）、内边距（padding）、外边距（margin）。code

当元素的宽度和高度都不为0时，border呈现出一个四方形环绕在内容的四周。可是当元素的高度和宽度都为0时，状况就变得不一样了。htm

由于没有高度和宽度（指内容的高度和宽度），元素的四条边会重叠在一块儿，以下所示：图片

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

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

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

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

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代码

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>用边框属性制做三角形的原理详解</title>
<style type="text/css">  
    body {  
        padding: 0;  
        margin: 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>