以下是常用的三角形形狀

其實(shí)都是html+css就能實(shí)現(xiàn)，很簡單

代碼如下：

第一種方法

html代碼：

css代碼

第二種方法

以上代碼便是實(shí)現(xiàn)上下左右方向三角形的代碼；然而其實(shí)不難發(fā)現(xiàn)，其實(shí)它們之間有個共同點(diǎn)，都是由border中的top、right、bottom、left實(shí)現(xiàn)的，因此我們還有一種寫法，通過實(shí)現(xiàn)設(shè)置一個div的border，讓其隱藏掉，再給其中一個方向顏色，該方向的三角形就能顯現(xiàn)出來，比如實(shí)現(xiàn)向上方向的三角形的css代碼：

其它方向的就相類似，就不一一舉例了。

一點(diǎn)tips
如果認(rèn)真嘗試敲過這個代碼的讀者或許會發(fā)現(xiàn)，以第一種方法的例子比方，都給border設(shè)置了三個方向的值，好奇的人會想，只設(shè)置兩個行或者一個行嗎？敲敲就知道啦~

實(shí)踐中告訴我，設(shè)置一個或者兩個但設(shè)置相反方向上的border值的都不會顯示出來，可以試試；但是如果兩個中，不同方向上的兩個值是會顯示出來的，至于是什么形狀，就看你選的方向了。實(shí)踐出真知！