本文介绍了如何利用HTML和CSS制作透明边框的三角形。通过设置不同边框宽度和颜色，实现了一个边框为100px的正方形，并使其部分边框变为蓝色，其余透明。由于IE6不支持透明，使用了dashed边框来模拟透明效果，最终组合成三角形。此外，还探讨了如何通过改变边框颜色来组合两个三角形，达到创建不同形状的三角形的方法。
在电脑上打开网页编辑器，新建一个HTML页面，如图：
制作一个宽、高为0，边框为100px的正方形，如图：
然后给这个正方形的各个边框设置边框色，把其中一个边框色设置为blue，其他
的设置为透明的，即：border-color:blue transparenttransparent transparent;代码如图：
用浏览器打开该页面，查看css绘制的三角形效果；
点击页面单击鼠标右键，选择【查看元素】，打开浏览器的代码控制台，可查看当前网页源码，或代码调试。
由于ie6不支持transparent，所以没有透明效果，就需要把border-style：solid
dashed dashed dashed；一个三角形就制作好了，如图：加粗样式
将两个相邻的三角形拼在一起，也可以得到一个三角形。只要将正方形的两个相邻边框都设置成非透明色即可，代码如图：
扫一扫
1472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
