CSS小三角

來源:互聯網
上載者:User

先看圖1效果:

代碼如下:

<div style=”border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;”></div>

關鍵是要知道上下左右四條邊框之間的串連處是呈斜線狀的,2:

然後上面的圖1的效果就簡單了。上邊框寬度是三角的高、邊框顏色與背景色相同,下邊框同上。左邊框寬度與上下邊框一樣設定,顏色是三角的顏色,即紅色。

這個Demo是幾種常見三角的寫法。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.