<style>
html, body {
margin: 0;
padding: 0;
}
/*下面用CSS3分别实现向上、下、左、右的三角形*/
.btn-color{
color: #622CB9;
}
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #089EF1;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid green;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid #F8071D;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-right:100px solid #F804EF;
}
/*箭头直角左上角*/
.r-angle-left-up{
width:0;
height:0;
border-bottom: 200px solid transparent;
border-left: 200px solid #0F05FC;
}
/*箭头直角右上角*/
.r-angle-right-up{
width:0;
height:0;
border-bottom:200px solid transparent;
border-right: 200px solid #622CB9;
}
/*箭头直角右下角*/
.r-angle-right-down{
width:0;
height:0;
border-top:200px solid transparent;
border-right:200px solid #008051;
}
/*箭头直角左下角*/
.r-angle-left-down{
width:0;
height:0;
border-top:200px solid transparent;
border-left: 200px solid #B35708;
}
</style>
<body>
<!--等腰三角-->
<div class="arrow-up btn-color"><!--向上的三角--></div>
<div class="arrow-right btn-color"><!--向右的三角--></div>
<div class="arrow-down btn-color"><!--向下的三角--></div>
<div class="arrow-left btn-color"><!--向左的三角--></div>
<!--直角三角-->
<div class="r-angle-left-up btn-color"><!--左上角的直角三角--></div>
<div class="r-angle-right-up btn-color"><!--右上角的直角三角--></div>
<div class="r-angle-right-down btn-color"><!--右下角的直角三角--></div>
<div class="r-angle-left-down btn-color"><!--左下角的直角三角--></div>
</body>