用CSS border相关属性画三角形_html-js-css

概述用CSS border相关属性画三角形，大家在制作网站前端的是时候，经常喜欢在新闻或者产品分类列表前面加一个小三角形，这样比较美观。通常的做法是直接用PS绘制小三角形，然后设置成背景色就可以了，用CSS border相关属性画三角形，大家在制作网站前端的是时候，经常喜欢在新闻或者产品分类列表前面加一个小三角形，这样比较美观。通常的做法是直接用PS绘制小三角形，然后设置成背景色就可以了，今天我就来教大家如何直接用CSS border相关属性画三角形，纯CSS代码绘制三角形，牛逼了吧
效果如下：

HTML代码如下

<!DOCTYPE HTML> <HTML lang="en"> <head> <Meta charset="utf-8"> <Title>CSS Triangle Demo</Title> <link rel="stylesheet" href="triangle.CSS"> </head> <body> <h3>Down Triangle</h3> <div class="down-triangle"> </div> <h3>Up Triangle</h3> <div class="up-triangle"> </div> <h3>left Triangle</h3> <div class="left-triangle"> </div> <h3>Right Triangle</h3> <div class="right-triangle"> </div> </body> </HTML>

CSS代码如下：

@H_22_403@ .down-triangle { wIDth: 0; height: 0; border-wIDth: 10px 10px 0 10px; border-style: solID; border-color: #dc291e transparent; } .up-triangle { wIDth: 0; height: 0; border-wIDth: 0px 10px 10px 10px; border-style: solID; border-color: #dc291e transparent; } .left-triangle { wIDth: 0; height: 0; border-wIDth: 10px 10px 10px 0px; border-style: solID; border-color: transparent #dc291e; } .right-triangle { wIDth: 0; height: 0; border-wIDth: 10px 0px 10px 10px; border-style: solID; border-color: transparent #dc291e; }

总结

以上是内存溢出为你收集整理的用CSS border相关属性画三角形全部内容，希望文章能够帮你解决用CSS border相关属性画三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1020352.html

用CSS border相关属性画三角形

发表评论

评论列表（0条）