软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 用css的border属性实现三角效果

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

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


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

    相关阅读
    栏目导航
    推荐软件