css是前端必備的技能之一，通過巧妙地運用css樣式，不僅可以讓頁面更加美觀，還可以實現各種炫酷的效果。今天，我們來介紹一種常見的純css橫線加三角的實現方式。

.box{
position: relative;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
}
.box::before{
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 12px 0 12px;
border-color: #ccc transparent transparent transparent;
transform: translateX(-50%);
}

以上是實現純css橫線加三角的代碼，其中，通過設置偽元素:before來實現三角效果。首先，我們為父元素.box設置position:relative，這樣可以讓子元素的絕對定位相對于.box而言。然后，我們為.box設置一個底部的邊框，設置padding-bottom值是為了空出來三角的高度。接著，在:before中，我們設置了content為“”表示該元素為空元素，接下來設置該元素的position為absolute，因為我們要讓它絕對定位在.box內部。接著，將left:50%和transform:translateX(-50%)設置，表示在.box中水平居中。同時，bottom:0表示貼在.box的底部。接著，設置寬度為0，高度為0，以及border-style、border-width和border-color來設置邊框，實現三角的效果。這里需要注意的是，設置border-width時，上方的邊框為20px，因為我們要讓三角高度為20px。

最終，我們就實現了一個漂亮的純css橫線加三角效果。在實際項目中，我們可以根據需求自定義樣式和顏色，實現更加多樣化的效果。