在網(wǎng)頁設(shè)計中，CSS標題前加旗幟是一種常見的效果，能夠為標題增加一定的視覺效果和美感，下面介紹如何實現(xiàn)這一效果。

/* 全局代碼 */
.flag {
display: inline-block;
position: relative;
margin-right: 10px;
width: 30px;
height: 30px;
background-image: url(flag.png);
background-repeat: no-repeat;
background-size: contain;
}
.flag:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: -10px;
border-top: 1px solid #333;
height: 10px;
width: 10px;
transform: rotate(-45deg) translateY(-50%);
}
/* 標題樣式 */
文章標題

通過CSS代碼中的“display: inline-block”屬性，可以使旗幟與標題處于同一行；“margin-right: 10px”用于控制旗幟與標題之間的間距；“background-image: url(flag.png)”設(shè)置旗幟的圖片地址；“background-repeat: no-repeat”控制圖片不重復(fù)顯示；“background-size: contain”保持圖片的寬高比，填滿盒子且不變形。

通過“:before”偽元素來實現(xiàn)旗幟上的小三角形，使用了邊框混合“border-top: 1px solid #333”來實現(xiàn)三角形形狀，通過“transform: rotate(-45deg) translateY(-50%)”來將三角形旋轉(zhuǎn)并垂直居中。

最后，在添加標題時，只需在標題文字外包一層“”即可完成標題前添加旗幟的效果。