先看圖1效果:
代碼如下:
<div style=”border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;”></div>
關鍵是要知道邊框的上下左右四條邊框之間的連接處是呈斜線狀的,如圖2:
然后上面的圖1的效果就簡單了。上邊框寬度是三角的高、邊框顏色與背景色相同,下邊框同上。左邊框寬度與上下邊框一樣設置,顏色是三角的顏色,即紅色。
這個Demo是幾種常見三角的寫法。
新聞熱點
疑難解答