在前端開發中，有時候需要用CSS來實現一些特殊的圖形效果，比如用純CSS代碼來實現一個帶三角形的文本塊。下面我們就來介紹一下如何用CSS實現這個效果。

.triangle {
position: relative;
width: 150px;
height: 80px;
color: #fff;
background: #369;
text-align: center;
line-height: 80px;
font-size: 18px;
}
.triangle:before {
content: '';
position: absolute;
width: 0;
height: 0;
top: -15px;
right: 0;
border-width: 15px 0 0 15px;
border-style: solid;
border-color: transparent transparent transparent #369;
}
.triangle:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: -15px;
left: 0;
border-width: 15px 15px 0 0;
border-style: solid;
border-color: transparent #369 transparent transparent;
}

以上就是CSS代碼的實現方法啦，接下來讓我們來詳細解釋一下這些代碼：

首先我們在HTML文件中創建一個帶有類名為“triangle”的div元素，并且在樣式表中設置它的屬性。它的寬度為150像素，高度為80像素，并且設置了文字居中，背景顏色為#369，顏色為白色，字體大小為18像素。

<div class="triangle">
文字內容
</div>

之后就是用CSS中的:before和:after偽元素來實現三角形了。:before偽元素表示在元素本身之前插入一個元素，而:after偽元素則表示在元素本身之后插入一個元素。

我們先來看:before偽元素的實現方法。我們將它的content屬性設置為空，position屬性設置為absolute（絕對定位），top屬性設置為-15像素（表示上方有15像素的偏移），right屬性設置為0（表示右側緊貼邊緣），border-width屬性設置為15px 0 0 15px（表示指定四個角的寬度），border-style屬性設置為solid（表示實線），border-color屬性設置為transparent transparent transparent #369（表示透明，透明，透明，和三角形的顏色#369）。

接下來是:after偽元素的實現方法。我們同樣將它的content屬性設置為空，position屬性設置為absolute（絕對定位），top屬性設置為-15像素（表示上方有15像素的偏移），left屬性設置為0（表示左側緊貼邊緣），border-width屬性設置為15px 15px 0 0（表示指定四個角的寬度），border-style屬性設置為solid（表示實線），border-color屬性設置為transparent #369 transparent transparent（表示透明，和三角形的顏色#369，透明，透明）。

這樣我們就成功實現了一個帶三角形的文本塊啦！