一、原理分析

在这里插入图片描述
如上图所示，一个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人！

深入剖析css三角原理