扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关如何使用CSS实现三角形，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联专注于企业全网营销推广、网站重做改版、德江网站定制设计、自适应品牌网站建设、H5建站、商城开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为德江等各大城市提供网站开发制作服务。
相信大家在浏览网站的时候，经常看到各种下拉菜单，上面会有一个小小的三角形，实现这种三角形一般会想到是用图片或者iconfont实现，然而其实这种三角形除了用图片和iconfont， 用css也可以实现。制作三角形的做法，主要是利用边框做成的，观察以下代码：
（可以专注红色部分代码）
一个宽高为50px*50px的盒子，分别加了上下左右四个100px不同颜色的边框，效果如图所示:
CSS实现三角形制作方法
那个可以想象，如果把盒子宽高都设置成0，则会显示4个不同颜色的三角形，代码如下：
效果如下:
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这个属性值，我们可以通过它把不必要是边框隐藏掉，就可以实现我们想要的三角形啦，代码如下：
关于“如何使用CSS实现三角形”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网