CSS实现三角形制作方法

相信大家在浏览网站的时候，经常看到各种下拉菜单，上面会有一个小小的三角形，实现这种三角形一般会想到是用图片或者iconfont实现，然而其实这种三角形除了用图片和iconfont， 用css也可以实现。制作三角形的做法，主要是利用边框做成的，观察以下代码：

（可以专注红色部分代码）

边框制作三角形

*{ padding: 0; margin: 0; list-style: none; }

.box{ width: 50px; height: 50px; margin:100px auto; }

.box{

border-top:100px solid red;

border-right:100px solid lime;

border-bottom:100px solid blue;

border-left:100px solid yellow;

}

一个宽高为50px*50px的盒子，分别加了上下左右四个100px不同颜色的边框，效果如图所示:

CSS实现三角形制作方法

那个可以想象，如果把盒子宽高都设置成0，则会显示4个不同颜色的三角形，代码如下：

边框制作三角形

*{ padding: 0; margin: 0; list-style: none; }

.box{ width:0; height:0; margin:100px auto; }

.box{

border-top:100px solid red;

border-right:100px solid lime;

border-bottom:100px solid blue;

border-left:100px solid yellow;

}

效果如下:

CSS实现三角形制作方法

如果想要得到单个三角形，必须把其他三角形隐藏掉，所以现在先来了解一下transparent这个属性值。

说明：

RGBA(R,G,B,A)

取值：

R：

红色值。正整数 | 百分数

G：

绿色值。正整数 | 百分数

B：

蓝色值。正整数 | 百分数

A：

Alpha透明度。取值0~1之间。

说明：

用来指定全透明色彩。

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。

在CSS2中，border-color也开始接受transparent作为参数值。

在CSS3中，transparent被延伸到任何一个有color值的属性上。

有了transparent这个属性值，我们可以通过它把不必要是边框隐藏掉，就可以实现我们想要的三角形啦，代码如下：

边框制作三角形

*{ padding: 0; margin: 0; list-style: none; }

.box{ width:0; height:0; margin:100px auto; }

.box{

border-top:100px solid red;

border-right:100px solid transparent; /*透明颜色的边框*/

border-bottom:100px solid transparent; /*透明颜色的边框*/

border-left:100px solid transparent; /*透明颜色的边框*/

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！