您的位置:首页 » 分类: HTML+CSS » 文章: 用css的border属性实现三角

用css的border属性实现三角

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的,在现实的前端开发中也很有用,至少可以减小图片的字节。

先看看应用实例吧:

11

实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如

[code=”css”]

.box{

width:0px;

height:0;

border-bottom:50px #F00 solid;

border-left:50px #03F solid;

border-right: 50px #F90 solid;

border-top:50px #6C0 solid;

}

[/code]

在浏览器中的显示如图:

2009-09-14_225923

点击查看demo:http://www.css88.com/demo/border/border1.html

这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角:

[code=”css”]

.to-top{

display:block;

overflow:hidden;

width:0px;

height:0px;

border:6px solid #ccc;

border-color:#ccc #fff;

border-width:0 6px 6px 6px;

}

[/code]

更多的实例请点击查看demo:http://www.css88.com/demo/border/border.html

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

25 条评论 - 关于 “用css的border属性实现三角

  1. 确实不错,不过这个有一个局限性,如果背景是图片的话,或者跟border的颜色不一致的时候就有点难看了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注