实现原理:border
<body>
<div class="arrow"></div>
</body>
.arrow{
width:0;height:0;
border:50px solid;
border-color:red green blue yellow;
}
向上箭头
.arrow{
width:0;height:0;
border:50px solid transparent;
border-bottom-color:#000;
}
向下箭头
.arrow{
width:0;height:0;
border:50px solid transparent;
border-top-color:#000;
}
向左箭头
.arrow{
width:0;height:0;
border:50px solid transparent;
border-right-color:#000;
}
向右箭头
.arrow{
width:0;height:0;
border:50px solid transparent;
border-left-color:#000;
}
.arrow{
width:0;height:0;
border:50px solid transparent;
border-top-color:#000;
border-right-color:#000;
}
.arrow{
width:0;height:0;
border:50px solid transparent;
border-right-color:#000;
border-bottom-color:#000;
}
.arrow{
width:0;height:0;
border:50px solid transparent;
border-bottom-color:#000;
border-left-color:#000;
}
width:0;height:0;
border:50px solid transparent;
border-left-color:#000;
border-top-color:#000;