CSS帶箭頭的圓是一種常用的頁面設計元素，它可以用于各種場景，比如指示當前頁面位置、顯示菜單選項等。下面我們來介紹如何使用CSS實現一個帶箭頭的圓。

.arrow-circle {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
background-color: #007bff;
}
.arrow-circle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin-top: -8px;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: #007bff transparent transparent transparent;
transform: rotate(45deg);
}
.arrow-circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin-top: -8px;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #007bff transparent;
transform: rotate(45deg);
}

首先定義一個帶有圓角的圓形元素，并設置背景色為藍色。接著，使用偽元素:before和:after分別來創建兩個三角形，分別指向圓形的左右兩個方向。這里我們使用旋轉transform屬性來調整箭頭方向。

最后應用到網頁中即可。

<div class="arrow-circle"></div>

這樣就實現了一個帶箭頭的圓。當然，你可以根據實際需求來調整圓的大小、顏色、箭頭大小等屬性，來適應各種場景。