用邊框屬性製做三角形的原理詳解

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。