原理是在採用三個div~top、content、bottom，top、bottom層裡面加入4個em標籤， margin-left，margin-right逐級遞減，於是就產生了圓角的感覺
ok廢話不多說，上**先
css：
.content.r_a,.r_b,.r_c,.r_d.r_a1.r_a2.r_a.r_b.r_c.r_d
html**
<body
>
<
div
class
="r_top"
>
<
em class
="r_a"
>
em>
<
em class
="r_b"
>
em>
<
em class
="r_c"
>
em>
<
em class
="r_d"
>
em>
div>
<
div
class
="content"
>
div>
<
div
class
="r_bottom"
>
div>
body
>
就這樣乙個圓角就實現了
下面實現三角，這個就比較簡單了, 把元素定義成塊級0大小(0寬0高0字型大小0行高)後,設乙個border-width 通過改變元素的border-color值實現. 本文用的是em元素, 當然, 如果你專案中用em比較頻繁, 為避免衝突也可以用samp,strong等元素.
當然, 即便用css實現的三角形, 萬惡的ie6還是會給你添點麻煩: ie6不支援border-color的transparent值, 怎麼辦? 為ie6單獨寫乙個border-color值, 然後用chroma濾鏡實現透明, 詳見**
html：
<div
class
="sj"
>
<
em>
em>
<
em class
="a"
>
em>
<
em class
="b"
>
em>
div>
css：
.sj em.sj em.a
.sj em.b
css實現小三角
其實早都做過用css來實現小三角的箭頭符號了，不過一直都沒靜下心來仔細研究，今天正好多看了些，都說好記性不如爛筆頭，把所了解到的趕緊記錄下來。大致有兩種方法 邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角 字元法就是採用菱形的字元 然後決定定位把多餘的部分溢位掉，該種方法只適合三角和...
css空心三角形 CSS實現空心三角指示箭頭
web開發中，三角形的日常應用，以三角形指示箭頭最為常見，其用css來實現非常簡單，熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實心三角形 還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，我們...
CSS實現三角形原理及過程
在開發中，遇到很多的列表都需要用到三角形的箭頭，可以直接用乙個作背景鋪墊，但這樣占用一定的記憶體，對於這種簡單的圖形純css也能實現，它占用的記憶體相對較小,所以相比而言，比更好用。下面是具體實現步驟 1 首先，建立乙個div。給它設定乙個寬高和背景顏色，並給它乙個較大的邊框,將每一邊的邊框設定不同...