今天这个教程中主要和大家一起来探讨和学习:如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形,今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的,但我没有找到Eric Meyer介绍的教程,可相关教程就很多,我在此就不列出来了,我们开始今天的学习之旅吧。
如何工作?
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果。我们一起来看一段代码: