<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*向上*/
.triangle_border_up {
0;
height: 0;
border- 0 30px 30px;
border-style: solid;
border-color: transparent transparent #333; /*透明 透明 灰*/
margin: 40px auto;
position: relative;
}
.triangle_border_up span {
display: block;
0;
height: 0;
border- 0 28px 28px;
border-style: solid;
border-color: transparent transparent #fc0; /*透明 透明 黄*/
position: absolute;
top: 0px;
left: 0px;
}
/*向下*/
.triangle_border_down {
0;
height: 0;
border- 30px 30px 0;
border-style: solid;
border-color: #333 transparent transparent; /*灰 透明 透明 */
margin: 40px auto;
position: relative;
}
.triangle_border_down span {
display: block;
0;
height: 0;
border- 28px 28px 0;
border-style: solid;
border-color: #fc0 transparent transparent; /*黄 透明 透明 */
position: absolute;
top: 0px;
left: 0px;
}
/*向左*/
.triangle_border_left {
0;
height: 0;
border- 30px 30px 30px 0;
border-style: solid;
border-color: transparent #333 transparent transparent; /*透明 灰 透明 透明 */
margin: 40px auto;
position: relative;
}
.triangle_border_left span {
display: block;
0;
height: 0;
border- 28px 28px 28px 0;
border-style: solid;
border-color: transparent #fc0 transparent transparent; /*透明 黄 透明 透明 */
position: absolute;
top: 0px;
left: 0px;
}
/*向右*/
.triangle_border_right {
0;
height: 0;
border- 30px 0 30px 30px;
border-style: solid;
border-color: transparent transparent transparent #333; /*透明 透明 透明 灰*/
margin: 40px auto;
position: relative;
}
.triangle_border_right span {
display: block;
0;
height: 0;
border- 28px 0 28px 28px;
border-style: solid;
border-color: transparent transparent transparent #fc0; /*透明 透明 透明 黄*/
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<!-- 向上的三角形 -->
<div class="triangle_border_up">
<span></span>
</div>
<!-- 向下的三角形 -->
<div class="triangle_border_down">
<span></span>
</div>
<!-- 向左的三角形 -->
<div class="triangle_border_left">
<span></span>
</div>
<!-- 向右的三角形 -->
<div class="triangle_border_right">
<span></span>
</div>
</body>
</html>