CSS绘制三角形

CSS 绘制各种三角形

⬆️向上

1
2
3
4
5
6
7
.triangle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

➡️向右

1
2
3
4
5
6
7
.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 100px solid red;
}

⬇️向下

1
2
3
4
5
6
7
.triangle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

⬅️向左

1
2
3
4
5
6
7
.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right: 100px solid red;
}

↗️向右上

1
2
3
4
5
6
.triangle {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-left: 100px solid transparent;
}

↖️向左上

1
2
3
4
5
6
.triangle {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}

↘️向右下

1
2
3
4
5
6
.triangle {
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 100px solid transparent;
}
  1. ↙️向左下
    1
    2
    3
    4
    5
    6
    .triangle {
     width: 0;
     height: 0;
     border-bottom: 100px solid red;
     border-right: 100px solid transparent;
    }