深入剖析css三角原理
一、原理分析
如上图所示,一个div盒子包括margin+border+padding+content
而这些边框的交界处,如图中的红框的地方,上下左右边框的交界处会出现斜线,我们就是利用这个特点,然后给予不同的宽和高就可以得到我们想要的三角。
二、实战操作
1、通过实例去清晰的了解原理
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 20px;
width: 20px;
border: 20px solid;
border-color: #FF0000 #FFFF00 aqua aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们看代码,我弄了一个宽和高都为20px的盒子
然后上下左右边框的宽度都设置为了20px,就可以得到下面图片的结果
从图片我们可以清晰的看到四个顶角处的斜线,而css三角恰好可以利用这个特点。
再看一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 0;
width: 0;
border: 80px solid;
border-color: #FF0000 #FFFF00 aqua aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
此时我让div的盒子宽和高都为0,只设置了边框的宽度,这样就可以把上图中中间的透明盒子去掉,如下图所示
现在是不是可以清晰的看到有四个三角形了
2、实战三角形
那么我们的需求是只要一个向右的三角形,怎么做呢?
再看一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 0;
width: 0;
border: 80px solid;
/* border-color: #FF0000 #FFFF00 aqua aquamarine; */
border-color: transparent transparent transparent aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们看代码是怎么写的,我让除了左边框之外的其他三边边框的颜色都设置为了透明色,我想现在你不用我说也知道怎么回事了。
同理想要方向向下,向左,向上,只需要改变border-color的透明色就可以,代码分别为
border-color: #FF0000 transparent transparent transparent;
border-color: transparent #FFFF00 transparent transparent;
border-color: transparent transparent aqua transparent;
三角形我们就这样得到了,运用到项目中你可以根据具体要求去设定他们出现的位置。
同理你想要下面这种三角形怎么操作,直接看代码
border-color: transparent transparent #FF0000 #FF0000 ;
当然我们也可以做不规则三角形,原理在此基础上又用到了定位和css3旋转的特性,直接看下面这个例子即可
3、气泡框制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
margin: 100px auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 20px;
line-height: 100px;
background-color: #FF0000;
color: #fff;
text-align: center;
}
.angle {
position: absolute;
top: -30px;
right: -90px;
height: 0;
width: 0;
border-top: 80px solid;
border-left: 80px solid;
border-right: 40px solid;
/* border-bottom: 40px solid; */
/* border-color: #FF0000 #FFFF00 aqua aquamarine; */
/* border-color: #FF0000 #FF0000 transparent transparent; */
border-color: transparent #FF0000 #FF0000 transparent;
transform: rotateZ(100deg);
}
</style>
</head>
<body>
<div class="outer">
哈哈哈哈哈哈哈
<div class="angle"></div>
</div>
</body>
</html>
好了,css三角的分享就到这里了,加油吧,IT人!