程序员人生网站导航

用css的border属性实现三角效果

栏目：htmlcss时间：2014-01-18 02:59:51

网(LieHuo.Net)教程今天，小编在博客园看到一篇关于文章的介绍，原来实现三角形不用图片的，可以用css，你有没有想过呢？让我们一起来研究一下吧。

以下为引用的内容：
.box{
   width:0;
   height:0;
   border-bottom:50px #F00 solid;
   border-left:50px #03F solid;
   border-right: 50px #F90 solid;
   border-top:50px #6C0 solid;
}

如图：

这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。
上下和左右border-width不一致时可获取非直角三角形。

------分隔线----------------------------

上一篇 妙用JavaScript将数字翻译成英文

下一篇 谷歌走了，我们如何在百度魔爪中求生存？

------分隔线----------------------------