这篇文章将为大家详细讲解有关如何使用CSS实现三角形,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
相信大家在浏览网站的时候,经常看到各种下拉菜单,上面会有一个小小的三角形,实现这种三角形一般会想到是用图片或者iconfont实现,然而其实这种三角形除了用图片和iconfont, 用css也可以实现。制作三角形的做法,主要是利用边框做成的,观察以下代码:
(可以专注红色部分代码)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框制作三角形</title>
<style>
*{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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
一个宽高为50px*50px的盒子,分别加了上下左右四个100px不同颜色的边框,效果如图所示:
CSS实现三角形制作方法
那个可以想象,如果把盒子宽高都设置成0,则会显示4个不同颜色的三角形,代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框制作三角形</title>
<style>
*{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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果如下:
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这个属性值,我们可以通过它把不必要是边框隐藏掉,就可以实现我们想要的三角形啦,代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框制作三角形</title>
<style>
*{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;/*透明颜色的边框*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
关于“如何使用CSS实现三角形”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。