版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34874517/article/details/81333620
话不多说, 直切正题
/* 上箭头 */
div.arrow-up {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
font-size: 0px;
line-height: 0px;
}
/* 下箭头 */
div.arrow-down {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid yellowgreen;
font-size: 0px;
line-height: 0px;
}
/* left箭头 */
div.arrow-left {
width: 0px;
height: 0px;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid red;
font-size: 0px;
line-height: 0px;
}
/* 右箭头 */
div.arrow-right {
width: 0px;
height: 0px;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-left: 5px solid green;
font-size: 0px;
line-height: 0px;
}
div {
margin-left: 100px;
margin-top: 50px;
}<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>效果图如下:
可惜 css3有兼容性 不然可以替代 一些小型的 图片