用CSS3實現帶小三角形的div框(不用圖片) 現在看到了很多帶小三角形的方框，如微信、Mac版的QQ、QQ空間的時間軸等等，在聊天或者是發表的狀態的內容外面都有一個帶小三角形的矩形框包圍着，感覺看着很不錯，於是決定親自動手寫一個，我上次用的是偏移背景圖片法，那么今天就不用 ...

html代碼是這樣的 <div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div ...

before 和 after后，我們來看看如何使用 before 和 after來制作小三角形吧。 1 ...

你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜單、甚至在loading載入動畫里。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯系關系式很重要的。 有一些不同的方法來設計並制作一個三角形，在本文中，我將介紹： 點此查看實例展示 編碼 圖片 假如你已經有 ...

的sprite圖片），如果遇到的設計圖不是分層的或者設計軟件都不熟的話是很郁悶的... 　　其實有一種簡單的方法 ...

...

很多時候我們用到三角形這個效果： 　　我們可以用CSS3實現這個效果，怎去做呢？先闡述一下原理，我們定義一個空的div，設置這個div寬高為0，給這個div加上一個100px邊框（這里是方便觀察），得到的是一個正方形，顏色和定義邊框的顏色相同，我們看到正方形其實是這個div邊框 ...

<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class ...