国内最全IT社区平台 联系我们 | 收藏本站
阿里云优惠2流量王
您当前位置:首页 > web前端 > htmlcss > 用css的border属性实现三角效果

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

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

网(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不一致时可获取非直角三角形。


提示:可修改后代码再运行!

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生