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

用css的border属性实现三角

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

今天啄米鸟给我了一个冰剑的《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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

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

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

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

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

发表评论

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