在網頁設計中，使用圖片是很常見的。而有時為了讓圖片更加生動，我們需要在圖片上添加一些標簽形狀，這時我們可以使用CSS來實現。

首先，我們需要在HTML中插入圖片，這可以通過使用“img”標簽來完成。如下所示：

<img src="picture.jpg" alt="picture">

接著，我們需要使用CSS來添加一個圖形標簽。這可以通過使用“:after”偽元素來實現。如下所示：

img:after{
content:""; /* 必須要有content屬性 */
position:absolute; /* 絕對定位 */
left:50%; /* 定義標簽在圖片中心位置 */
top:50%;
transform:translate(-50%,-50%); /* 圖片位置變動 */
width:50px; /* 標簽大小 */
height:50px;
background-color:red; /* 標簽背景 */
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%); /* 定義標簽形狀 */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
}

解釋一下代碼中的各個屬性：

• content: "" - 必須要有這個屬性，但內容可以為空
• position: absolute - 絕對定位，讓標簽在圖片上重疊
• left 和 top: 50% - 定義標簽在圖片中心位置，同時可以通過 transform 屬性進行微調
• width 和 height - 定義標簽的大小
• background-color - 定義標簽的背景色
• -webkit-clip-path 和 clip-path - 定義標簽的形狀，這里使用了多邊形。雖然 clip-path 屬性不是所有瀏覽器都支持，但我們可以通過添加 -webkit- 前綴來解決這個問題。

在完成上述代碼后，我們就可以在圖片上添加形狀標簽了。需要注意的是，在實際使用中，我們可能需要對標簽進行微調，以使其更加貼合圖片。此外，我們還可以通過使用“:before”偽元素來添加其他效果，比如文字標簽等。