纯css画三角形

1.向上三角形

<div class="triangle1"></div>
.triangle1{
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
    border-bottom: 50px solid #000;
	border-right:  50px solid transparent;
	border-left:   50px solid transparent
}

2.向下三角形

<div class="triangle2"></div>
.triangle2{
	width: 0;
	height: 0;
	border-top: 50px solid #000;
	border-bottom: 50px solid transparent;
	border-right:  50px solid transparent;
	border-left:   50px solid transparent
}

3.向左三角形

<div class="triangle3"></div>
.triangle3{
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right:  50px solid #000;
	border-left:   50px solid transparent;
}

4.向右三角形

<div class="triangle4"></div>
.triangle4{
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right:  50px solid transparent;
	border-left:   50px solid #000;
}

5.画一个有边缘色的三角形,如tip的提示框、聊天消息等

<div class="triangle5">hi,亲</div>
.triangle5{
	width: 300px;
	height: 80px;
	border: 1px solid #ccc;
	position: relative;
	padding:20px 20px 0;
	/* 添加阴影 */
	filter: drop-shadow(0 0 2px #999);
	background-color: #fff;
	margin-left: 80px;
 }
 .triangle5::before{
	content: "";
	position: absolute;
    top: 34px;
	left: -10px;
	border-right: 10px solid #ccc;
	border-top:6px solid transparent;
	border-bottom: 6px solid transparent;
}
.triangle5::after{
	content: "";
	position: absolute;
	top: 34px;
	left: -8px;
	border-right: 10px solid #fff;
	border-top:6px solid transparent;
	border-bottom: 6px solid transparent;
}