CSS中可以使用偽元素:before或:after，在圓圈里面畫出三角形。

.circle{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: relative;
}
/*使用:before畫出一個等邊三角形*/
.circle:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(45deg);
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #fff transparent;
}
/*使用:after畫出一個直角三角形*/
.circle:after{
content: "";
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%) rotate(45deg);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #fff transparent transparent transparent;
}

在.circle里面使用:before或:after偽類，其中content屬性不能為空，position屬性要設置為absolute，top和left屬性調整到元素的中心位置，transform屬性旋轉45度，控制邊框的樣式和顏色就可以畫出不同的三角形了。