之前部落格裡寫過一篇關於css繪製各種形狀的文章，當時也是邊看書編寫的，看到這次讀書筆記第3節又看到如何畫三角形的的技巧，我們索性就回顧一下。
怎麼快速想起來三角形的css，首先就要想起那個4個長梯形圍成的正方形：
三角形與聊天氣泡框title
>
>
.container
.********-origin
style
>
head
>
>
class
="container"
>
class
=>
class
="********-origin"
>
div>
div>
div>
body
>
然後我們自然會想到把中間的小方塊去掉（寬度變成0）是不是就變成4個三角形頭對頭了呢？
我們只想要乙個，那如果把上左右的border都去掉是什麼樣子？發現把左右上邊框去掉，整個圖形都不見了，為什麼會這樣呢？邊框都在，則css會自動權重為1，所以雖然沒有中間的div，大家相互依託，
起碼有立足之處，其它邊框刪掉，中間div也沒有，下邊框也就不存在了，愛信不信，僅供參考。
所以可以試著保留相鄰的邊框，只刪上邊框：
發現竟然可行，其他兩邊的我們通過透明度把它隱藏掉就可以了,背景色也一起隱藏掉；
三角形與聊天氣泡框title
>
>
.container
.********-origin
style
>
head
>
>
class
="container"
>
class
=>
class
="********-origin"
>
div>
div>
div>
body
>
大功告成，如果你完整看到這裡，什麼上下左右正斜的三角都不是問題，改改各邊長寬總有你想要的效果。
知道三角形的畫法，這個就不是事了，直接上**。
三角形與聊天氣泡框title
>
>
.container
.********-origin
.msg
.msg::before
.msg::after
style
>
head
>
>
class
="container"
>
class
=>
class
="********-origin"
>
div>
div>
class
=>
class
="msg"
>
要分清偽元素和偽類哦！
div>
div>
div>
body
>
html
>
下次就寫偽元素和偽類吧，就這麼愉快地決定了。
用css畫三角形（提示框三角形）
1 有邊框的三角形 我們來寫下帶邊框的三角形。如果是乙個正方形，我們寫邊時，會用到border，但我們這裡討論的三角形本身就是border，不可能再給border新增border屬性，所以我們需要用到其他辦法。最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所...
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...