您当前位置：首页 > web前端 > htmlcss > 用css的border属性实现三角效果

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

来源：程序员人生发布时间：2014-01-18 02:59:51 阅读次数：2831次

网(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将数字翻译成英文

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

分享到:

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

为码而活

积分：4237

15粉丝

7关注

栏目热点