1.繪製乙個外邊框
.div
2.重定義外邊框樣式
當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察
/*使用下面的語句替換上面的border定義*/
border-bottom:50px solid#555555;border-top:50px solid#555555;border-right:50px solid#333333;border-left:50px solid#333333;
觀察顯示結果可以看出，對角線是兩個邊框線條的分界點
3.元素尺寸更改為0
試想一下，如果元素的寬高度無限接近於零，邊框的顯示效果梯形是否越接近於三角形，
把div元素的寬度、高度設定為0，可以看到如下效果，每個邊框側邊設定對應乙個三角形，這時候你應該有繪製三角形的基本思路了，把一部分邊框側邊顏色設定為透明，就可以呈現出乙個三角形效果
width:0px;height:0px;
4.三個邊設定透明
前面講解過顏色值除了十六進製制表示，也可以使用rgb格式表示，rgba是css3新增標準，
透明顏色可以表示為rgba(0,0,0,0),第四個引數a設為0全透明即可，其它三個引數無所謂，
border-top寬度設為0
檢視上面的三角形可以看到，雖然其他三個三角形影藏掉了，但是仍然占用位置，可以把底部border-bottom對面的頂部邊線border-top寬度設定為0，boder的寬度預設就是0，設定為0就意味著不定義即可，效果如下
測試賦予邊框不同的寬度(順序：top——right——left)
25——25——25 50——25——25 25——25——50 25——50——50
注意塊元素預設的寬度是100%，必須寫width:0px不能像邊框寬度為0的時候可以不寫，不過如果你把塊元素轉化為行內塊元素就不存在這個問題，一般使用css設計圖示也是要把塊元素轉化為行內塊元素，
行內塊元素的特點前面說過和普通漢字字元類似可以在一行排列，同時又具備寬高度邊距等屬性。
結論使用外邊框的三個邊線可以完成任何邊長三角形的的製作，自然也包括特殊的直角三角形和等腰、等邊三角形，以後使用的時候直接複製、修改下面**即可。
css繪製向左三角形 純css 實現三角形
每天學習乙個小技能 現在的 上 手機上我們經常見到一些下拉列表的下箭頭 其實方式很簡單 直接引入 或者去找字型檔案 隨著技術的發展 前端效能這一方面有很大的提公升 再不能用 或者盡量不適用的情況下 css 也可以繪製簡單的 下面就是三角形 首先這個思路的講解 就是用到了 border 邊框這個屬性 ...
CSS繪製三角形
利用css繪製三角形 並應用在相應的場景中，減少的使用，可提高載入速率，降低http請求次數 在同一方向上，大致有三種繪製方式，繪製出來的有兩種規格 在保持寬度不變的情況下 對比圖 假定給第乙個三角形命名為 1，則第二第三個分別為 2，3 先從第三個最小面積的說起，如下 height 0 width...
css繪製三角形
今天，偶遇乙個css繪製三角形的 用處很大哦，分享給大家，送上 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6 style type text css 7.parent 13.square...