志达IT网站css三角形
网页规划中咱们常常能见到各类三角形，比如二级菜单，下拉列表，三角形作为一个简略的图标能够清晰明了的标明页面的模块和功用。在具体的页面规划过程中能够直接运用背景图片完成，也能够通过CSS代码完成三角形功用。因一般规划时CSS完成三角形简略快捷，这儿推荐运用CSS完成三角形。除非三角形图片特别细致精巧，优于直接代码完成作用。
三角形具体完成原理
一般盒模型的四个边框的衔接处由于色彩统一导致细节部分被疏忽。当把一个盒子边框设置为四种色彩时，边框处的细节便暴露出来。细节如下。
能够看到四个角的地方边框均分导致呈现斜边，斜边便是三角形形成的根底线段。这时把斜边组合起来就能与上下左右的边框组合为三角形。此刻把盒子宽高去掉，让四个边框紧挨在一起。
作用如上图。
此刻咱们已经完成了4个三角形，只取其间一个三角形，设置其他三个三角形区域色彩通明度，使其彻底通明，到达不可视作用即可。
完成方法一
用色彩中的rgba完成即可（red,green,blue,alpha）。最终一个数值便是目标的不通明度特点。值为1，彻底可视，值为零，彻底不可视。半通明作用可设置为0到1的其间恣意值，一般取0.5。
完成方法二
用CSS中的transparent特点设置。同样是指定不通明度，能够直接用在border-top-color,border-bottom-color,border-left-color,border-right-color处.
完成方法三
应该说是通明的完成方法(朴实当作拓展，只是学习完成三角形的话该部分能够直接跳过)
运用opacity。该特点可对元素运用，不能选中border，故不能完成三角形。取值从0.0到1.0。类似与rgba中的最终一个alpha。
留意：该特点可承继。运用时会使其子元素同样通明或不通明。运用时应小心元素的子元素的该特点是否被承继。一般推荐运用rgba设置色彩完成不通明度的调整。
HTML三角形
1、先写一个盒子
2、让宽度和高度为0
3、给出一个border值，border：10pxsolidtransparent;
4、想要那个方向的三角形，就给出哪个方向的颜色
如图所示：border-top-coloor:blue;上面的三角形便是蓝色！
border-left-coloor:red;上面的三角形便是赤色！
……
留意：如图所示正方形的边长为20px但是所写的border值为10px根据此来做出想要的三角形即可！
