在網上你可以隨意搜到很多用css的border屬性畫的圖形，比如麵包屑導航、三角形等等，畫這些圖形可能結合了css的偽類:before 、 :after等，當然也可能沒有，這並不影響我今天要分享的，當初作為新手的我看到這些**覺得很神奇但並不能理解，今天，在相對理解的基礎上我自己畫出了這些三角形更是覺得神奇於是來分享。
首先我們看乙個三角形
想象它是由乙個正方形變來的，如何變呢，先來看看這個正方形
為了解釋的更加清晰，我們給正方形的四個角標上記號
假設dc邊，也就是底邊，不在了，然後我們將dc兩個點連起來，先假設他們的結合點在曾經dc邊的終點上，你看，我們是不是得到了乙個三角形 ？
我們的三角形大致是用了這個原理，當然不是上圖的這種轉換，我們讓乙個 width 和 height 都為0的div，通過border來畫這個三角形，如果需要畫乙個箭頭向下的三角形，是不是讓底邊的border消失就好了呢 ？ 同時，只給頂部的border乙個顏色，其他的border都為透明色transparent
為了觀察清楚原div，我們先還原一部，假設所有的border的color為red
然後看看這個div
依次改變border的color就會看清每個border
然後根據需要顯示對應的border-color就好了
然後根據需要我們就可以畫出自己想要的圖形
以下是畫三角形的css**參考
.arrow-down
.arrow-up
.arrow-left
.arrow-right
.********-upright
.********-upleft
.********-downright
.********-downleft
css中的border屬性。。。。。
1.border color 邊框的顏色 一般設定邊框都有3個屬性 寬度 線的樣式 顏色，如果寬度設定了很多px，那麼就可以給邊框設定很多顏色，讓邊框顯示出漸變的效果，不過設定邊框不同顏色時只能通過border bottom colors，border top colors，border left ...
結合整理的css用border畫三角形的原理
1 html css上三角.trange左右有邊框但是透明，後面用底部的顏色和邊框填充 2 利用疊加層來畫帶邊框的三角形 是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所需的顏色 內層三角形絕對定位在裡面。整體就能形成帶邊框三角形的假象 html divclass bor...
CSS 利用border屬性畫三角形和梯形
首先，看一下border的延申效果 定義乙個正常顯示的div 效果如圖 可以發現，border的延申效果是成梯形的乙個線條。那麼，如果我們把中間div的大小設定為0，那麼中間的白色區域則為乙個點，即梯形中的一邊消失，即可實現繪製三角形的目的。三角形修改如下 效果如圖 通過修改各邊延申長度，可生產不規...