CSS小技巧-三角形
原理：由下图可以看出盒子的边框交界出呈现平滑的斜线，利用这一特点，再通过设置盒子高度和宽度为零（height：0；width：0）就可以得到四个三角形
原理示例图1
原理示例图2
然后再将4种边框颜色只保留一种，就可以得到想要的三角形
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角形</title>
<style>
.box {
width: 0;
height: 0;
border: 50px solid;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: aquamarine;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
进阶版
原理：设置不同的边框宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角形</title>
<style>
.box {
width: 0;
height: 0;
border-right: 75px solid transparent;
border-bottom: 150px solid aquamarine;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
应用-气泡对话框
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角形</title>
<style>
.box {
margin: 100px auto;
position: relative;
width: 300px;
height: 100px;
border: 5px solid skyblue;
}
.son {
position: absolute;
left: 50px;
bottom: -101px;
width: 0;
height: 0;
border-right: 50px solid transparent;
border-top: 100px solid skyblue;
}
.lucid {
position: absolute;
left: 5px;
top: -101px;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-top: 80px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="son">
<div class="lucid"></div>
</div>
</div>
</body>
</html>
