用 CSS3 做一个三角形
方法一：利用边框画三角形
等边三角形画法
1.将宽高设置0
2.给四条边框设置大一点的像素，每条边宽颜色不一样，出现4个不同方向的三角形
3.将想要方向的边框设置颜色，其他边框设置透明色transparent
<!DOCTYPE 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>
/* 可以先画四个三角形显示出来 */
.box1 {
/* 1.将盒子的宽度及高度设置为0像素，给边框的上下左右加不一样的颜色，像素大小可以根据想要的大小，发现一个矩形变成四个三角形 */
width: 0;
height: 0;
border-top: 50px solid peru;
border-bottom: 50px solid rosybrown;
border-left: 50px solid purple;
border-right: 50px solid goldenrod;
}
/* 将想要三角形的方向的设置颜色，其他的设置透明色 */
.box2 {
width: 0;
height: 0;
/* 2.给变宽设置透明颜色， */
border: 50px solid transparent;
/* 3.将想要哪个方向的三角形设置颜色 */
border-left-color: purple;
margin: 10px auto;
/* 4.为了照顾兼容性，line-height、font-size也设置为0 */
line-height: 0;
font-size: 0;
}
**不等边三角形画法**
```css
<!DOCTYPE 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>Document</title>
<style>
.box {
width: 0px;
height: 0px;
/* 将不同方向的边框像素设置不一样 */
border-top: 80px solid transparent;
border-left: 50px solid purple;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
方法二：利用边框和旋转画三角
应用场景：三角的下拉
1.利用一个盒子设置四个角中的任意一个角的边框
2.利用旋转让角旋转你想要的方向
<!DOCTYPE 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 {
position: relative;
width: 350px;
height: 35px;
border: 1px solid black;
}
/* 三角下拉标签 用伪元素表示出来 */
.box::after {
content: "";
position: absolute;
top: 8px;
right: 12px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 让这个角旋转45度 */
transform: rotate(45deg);
}
/* 当鼠标经过下拉框时，三角下来旋转 */
.box:hover::after {
/* 180度+45度=225度 */
transform: rotate(225deg);
/* 过渡的效果 */
transition: all 0.2s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
