原文**：
以前一直用做小三角、圓形按鈕等，但有時候實在不太方便，例如換個顏色又要開啟ps弄，挺麻煩的。而且對於追求細節和極致的前端工程師來說，能不用就不用，於是參考了天貓、微博等**的做法，用純html和css實現，效果還是不錯的。
以下是成果，相容主流瀏覽器，包括ie6。
**是：
執行**
編輯**
檢視源**
資源新增嚮導
/* css三角形 */
.arrow,.arrow s
.arrowr,.arrowr s
.arrowr s
.arrowr:hover
.arrowl,.arrowl s
.arrowl s
.arrowl:hover
.arrowt,.arrowt s
.arrowt s
.arrowt:hover
.arrowb,.arrowb s
.arrowb s
.arrowb:hover
/* css圓形 */
.circle
.circle:hover
/* 提示盒子 */
.tipbox
.tipbox .hd
.tipbox .hd .arrow
.tipbox .hd .arrow s
.tipbox .bd
.tipboxa .arrow s
.tipboxa .bd
<body>
<aclass="arrow arrowr">
<aclass="arrow arrowl">
<aclass="arrow arrowt">
<aclass="arrow arrowb">
<aclass="arrow arrowr"><s>
<aclass="arrow arrowl"><s>
<aclass="arrow arrowt"><s>
<aclass="arrow arrowb"><s>
<aclass="circle">•
<divclass="tipbox">
<divclass="hd">
<sclass="arrow arrowt"><s>
<divclass="bd">
用css做的提示盒子，上三角是純css，盒子圓角用到css3
<divclass="tipbox tipboxa">
<divclass="hd">
<sclass="arrow arrowt"><s>
<divclass="bd">
用css做的提示盒子，上三角是純css，盒子圓角用到css3
css三角原理可以看看這裡：
純css製作帶三角 相容所有瀏覽器
如何用 border 來製作三角。html 如下 如下 css 如下 如下 arrow up arrow down arrow right arrow left 效果圖如下 首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 ht...
css 純 css 製作帶三角（border篇）
以前寫過一篇純css製作帶三角的邊框 那篇文章是用html特殊字元來製作三角的，今天介紹下，如何用 border 來製作三角。html 如下 div class arrow up div div class arrow down div div class arrow left div div cl...
css 純 css 製作帶三角的邊框
首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全 通過特殊字元 利用 css 中的 margin 或者 position 方法完全可以實現以上效果。doctype html html lang en us ...