HTML5+CSS3实例教程:绘制三角形变换的播放器

武林网(www.vevb.com)文章简介：每天学一点点Html5+Css3,慢慢积累经验，从基础做起。下面主要介绍一下绘制简单的播放器按钮.

每天学一点点Html5+Css3,慢慢积累经验，从基础做起。下面主要介绍一下绘制简单的播放器按钮；

首先，看看当DIV的宽度和高度都为0的时候，设置边框成了什么样子？

代码如下：

1














  

运行效果图如下：

那么，从这张图中我们可以看出点什么么？

如果去掉其中的三个边框，我们是不是就可以绘制出三角形呢?答案是肯定的。一下代码就可以绘制出一个三角形：

效果：

现在绘制出播放器的按钮就简单了，结合学习笔记一种的一些技巧，稍微变通一下上面绘制三角形的代码，很容易就可以画出最后的播放器按钮了。

代码如下：

 1























   











































   







播放器按钮

效果：

总结：这个简单的实例主要应用了利用边框绘制三角形，稍微变换，比如改变边框的宽度或者div的尺寸，就可以绘制出其他的一些基本的图形。此外，还利用了CSS3中的圆角，阴影，图形变换。