在写这篇文章之前，我也看过很多前端大神写的代码，But，都只是粘贴代码和给出显示效果，对于初学者来说大家都喜欢刨根问底，为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解：
border边框语法：
border 四条边框设置 border-left 设置左边框，一般单独设置左边框样式使用 border-right 设置右边框，一般单独设置右边框样式使用 border-top 设置上边框，一般单独设置上边框样式使用 border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用
基本用法:
// 为引用 class="border-four" 的盒子对象设置1px像素红色实线边框.border-four { border: 1px solid #ff0000; };// 同理，单独给左边框设置1px像素红色实线边框.border-left { border-left: 1px solid #ff0000; };// 同理，单独给右边框设置1px像素红色实线边框.border-right { border-right: 1px solid #ff0000; };// 同理，单独给上边框设置1px像素红色实线边框.border-top { border-top: 1px solid #ff0000; };// 同理，单独给底边框设置1px像素红色实线边框.border-bottom { border-bottom: 1px solid #ff0000; }; 推荐常用边框:
// 实线边框：solid.solid { border: 1px solid #ff0000; }// 虚线边框：dashed.dashed { border: 1px dashed #ff0000; } 更多的边框值详见：W3C border-style 10种属性值
进入正题：
首先来看一下正常块元素设置四条不同颜色边框效果：为了效果明显，所有边框宽度均为50px；
上图 html 和 css 代码如下：
我是居中内容
查看更多关于经典CSS实现三角形图标原理解析_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110179