Document

*{

margin: 0;

padding: 0;

}

/*transparent 為透明*/

/*箭頭向下*/

.box-down{

display: inline-block;

width: 0;

height: 0;

border-right: 30px solid transparent;

border-left: 30px solid transparent;

border-bottom: 50px solid red;

}

/*箭頭向上*/

.box-up{

display: inline-block;

width: 0;

height: 0;

border-left:30px solid transparent;

border-right: 30px solid transparent;

border-top:50px solid green;

}

/*箭頭向左*/

.box-left{

display: inline-block;

width: 0;

height: 0;

border-top: 30px solid transparent;

border-left: 50px solid pink;

border-bottom: 30px solid transparent;

margin-left: 20px;

}

/*箭頭向右*/

.box-right{

display: inline-block;

width: 0;

height: 0;

border-top: 30px solid transparent;

border-right: 50px solid orange;

border-bottom: 30px solid transparent;

}

總結

以上是生活随笔為你收集整理的html点击圆点箭头分页,css实现小箭头的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。