CSS是Web前端中重要的一部分，不僅可以美化頁面，還可以實現(xiàn)一些特殊效果，比如在一個圓形之上加入三角形。下面我們就介紹一下如何使用CSS制作圓加三角形的效果。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
position: relative;
}
.circle::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #fff transparent transparent transparent;
bottom: -15px;
left: 50%;
margin-left: -15px;
}

上述代碼中，先定義了一個圓形的樣式，包括寬、高、邊框半徑和背景顏色等。接著使用偽元素選擇器`::before`，在圓形的下方加入一個三角形。其中，`content: ''`用于生成一個空的內(nèi)容；`position: absolute`讓三角形相對于圓形進行定位；`border-style: solid`定義邊框為實線，`border-width: 15px 15px 0 15px`設(shè)置每條邊框線的厚度，`border-color: #fff transparent transparent transparent`則設(shè)置邊框的顏色；`bottom: -15px`表示將三角形向上移動15像素，與圓形重合；`left: 50%`表示將三角形在圓形中心水平居中；`margin-left: -15px`用于調(diào)整三角形的位置，讓其完全覆蓋在圓形的下方。

這樣，就完成了使用CSS制作圓加三角形的效果。可以通過調(diào)整三角形的`border-width`和圓形的`width`和`height`來達到不同的效果。