經常看到一些非常漂亮的tip外掛程式，有乙個三角指向目標，非常好看。
之前一直以為上面的那個小三角是用背景做出來的，但是今天看了乙個網頁的原始碼才知道，使用純邊框屬性也可以做出這樣的效果來。經過一番搜尋和思索之後，終於把其原理吃透了，特發博記下。
一切都還要從html元素的邊框說起。
在html中，乙個元素可以具有邊框（border）、內邊距（padding）、外邊距（margin）。
因為沒有高度和寬度（指內容的高度和寬度），元素的四條邊會重疊在一起，如下所示：
假設四條邊都是乙個矩形，那麼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下驗證正確顯示）
12
3456
78
用css製作三角形
用css製作三角形，主要是利用css元素給 盒模型 設定邊框得到的。上圖，上邊框和做邊框，以及上邊框和右邊框的交合處，瀏覽器會按照直角的二分之一處繪製交合線。這是 盒模型 有寬和高時候的效果。我們假設一下，如果把寬和高設定成0px，同時讓邊框的寬度更寬一點情況會怎樣那？css 如下 tip1效果圖如...
css製作三角形
div html css circle 結果 總結 在製做圓形之前，首先需要保證這個元素是正方形，即width height 其次border radius 1 2width即可 border radiusde 的預設基準點是幾何中心 下面即將步入我們今天所說的正題 css製作三角形 首選css製作...
css 製作三角形
1.寫乙個盒子，寬高必須為0 2.根據自己所要三角形的方向，乙個邊界設定顏色，顯示三角效果 3.其它3邊界設定相同顏色 一般設定白色 就顯得設定不同顏色的那一邊是個三角 div生成三角結果如下 可以看到生成的三角是等邊三角型，若我們向設定其它想要的三角形，就需要對三角形做一些強化修改，乙個場景如下 ...