CSS圓角背景與三角形實現技巧

通過改變層疊元素的margin值實現圓角效果.當然,有人會說不用這麼麻煩,css3幾句代碼就可以搞定,但目前來說不實用,支援的瀏覽器沒幾個.

代碼如下	複製代碼
.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上方和左下右下角的容器*/ .r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四個圓角*/ .r_a, .r_b, .r_c{height:1px} .r_b, .r_c, .r_d{background:#cf6} .r_a {margin:0 5px} .r_b {margin:0 3px; border-width:0 2px} .r_c {margin:0 2px} .r_d {height:2px; margin:0 1px}

html部分

代碼如下	複製代碼
<!--左上方/右上方--> <div class=r_top><em>&nbsp;</em><em>&nbsp;</em><em></em><em></em></div> <div class=box>.....內容容器.....</div> <!--左下角/右下角--> <div class=r_bottom><em></em><em></em><em></em><em></em></div>

個就比較簡單了, 把元素定義成塊級0大小(0寬0高0字型大小0行高)後, 通過改變元素的border-color值實現. 本文用的是em元素, 當然, 如果你項目中用em比較頻繁, 為避免衝突也可以用samp,strong等元素.
當然, 即便用css實現的三角形, 萬惡的ie6還是會給你添點麻煩: ie6不支援border-color的transparent值, 怎麼辦? 為ie6單獨寫一個border-color值, 然後用chroma濾鏡實現透明, 詳見代碼

代碼如下

複製代碼

em{display:block;width:0;height:0;font-size:0;line-height:0;border-width:40px;border-style:solid;border-color:#cf6 #fff #39c #ffc;_filter:chroma(color=#000000)/*色度濾鏡,讓ie6實現透明bordercolor.濾鏡的顏色值不可簡寫*/} em.a{border-color:transparent transparent #fff transparent;_border-color:#000 #000 #fff #000} em.b{border-color:transparent transparent transparent #fff;_border-color:#000 #000 #000 #fff} em.c{border-color:#fff transparent transparent transparent;_border-color:#fff #000 #000 #000} em.d{border-color:transparent #fff transparent transparent;_border-color:#000 #fff #000 #000}

html

代碼如下	複製代碼
<em><!--它就是三角形了,哈--></em>

看完整的執行個體

 

代碼如下

複製代碼

<style> #demo{background:#047} .triangle{margin:20px} .round{margin:0 20px} .box{padding:10px;background:#cf6;font-size:36px; text-align:center;line-height:80px} /*round*/ .r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上方和左下右下角的容器*/ .r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四個圓角*/ .r_a, .r_b, .r_c{height:1px} .r_b, .r_c, .r_d{background:#cf6} .r_a {margin:0 5px} .r_b {margin:0 3px; border-width:0 2px} .r_c {margin:0 2px} .r_d {height:2px; margin:0 1px} /*triangle*/ .triangle em{display:block;width:0;height:0;font-size:0;line-height:0;border-width:40px;border-style:solid;border-color:#cf6 #fff #39c #ffc;_filter:chroma(color=#000000)/*色度濾鏡,讓ie6實現透明bordercolor.濾鏡的顏色值不可簡寫*/} .triangle em.a{border-color:transparent transparent #fff transparent;_border-color:#000 #000 #fff #000} .triangle em.b{border-color:transparent transparent transparent #fff;_border-color:#000 #000 #000 #fff} .triangle em.c{border-color:#fff transparent transparent transparent;_border-color:#fff #000 #000 #000} .triangle em.d{border-color:transparent #fff transparent transparent;_border-color:#000 #fff #000 #000} </style> <div id="demo"> <div class="round">   <!--左上方/右上方--> <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="box"> 我是一個圓角矩形,oh yeah! </div> <!--左下角/右下角--> <div class="r_bottom"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div> </div> <div class="triangle">  <em></em>  <br />  <em class="a"></em>  <br />  <em class="b"></em>  <br />  <em class="c"></em>  <br />  <em class="d"></em>  <br /> </div> </div>