武林網(www.survivalescaperooms.com)文章簡介：每天學一點點Html5+Css3,慢慢積累經驗，從基礎做起。下面主要介紹一下繪制簡單的播放器按鈕.

每天學一點點Html5+Css3,慢慢積累經驗，從基礎做起。下面主要介紹一下繪制簡單的播放器按鈕；

首先，看看當DIV的寬度和高度都為0的時候，設置邊框成了什么樣子？

代碼如下：

1














  

運行效果圖如下：

那么，從這張圖中我們可以看出點什么么？

如果去掉其中的三個邊框，我們是不是就可以繪制出三角形呢?答案是肯定的。一下代碼就可以繪制出一個三角形：

效果：

現在繪制出播放器的按鈕就簡單了，結合學習筆記一種的一些技巧，稍微變通一下上面繪制三角形的代碼，很容易就可以畫出最后的播放器按鈕了。

代碼如下：

 1























   











































   







播放器按鈕

效果：

總結：這個簡單的實例主要應用了利用邊框繪制三角形，稍微變換，比如改變邊框的寬度或者div的尺寸，就可以繪制出其他的一些基本的圖形。此外，還利用了CSS3中的圓角，陰影，圖形變換。