在網頁制作中，如何使用CSS繪制圖標是一個常見的問題。本文將介紹如何使用CSS繪制嘆號圖標。

.exclamation {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff7f50;
}
.exclamation:before {
content: "";
position: absolute;
top: 2px;
left: 50%;
transform: translate(-50%, 0);
width: 3px;
height: 9px;
background-color: #fff;
}
.exclamation:after {
content: "!";
position: absolute;
top: 6px;
left: 50%;
transform: translate(-50%, 0);
font-size: 14px;
font-weight: bold;
color: #fff;
}

首先我們先創建一個div元素，將類名設為“exclamation”。將position設為relative，使得在其內的元素可以相對于此元素定位。然后設立圓形的基本屬性，如width、height等，再設置圓角使得圖標更加圓潤。設置背景色為橙色，以符合嘆號圖標的特點。

接著通過:before和:after偽元素分別繪制出嘆號圖標中的兩個部分。由于嘆號中的感嘆號是垂直居中的，利用transform讓其水平居中，同時設置一個較大的font-size使感嘆號更加顯眼。字體顏色和背景色在前面為div定義的基本屬性里已設置好，無需再次設置。

至此，一個簡單的嘆號圖標就完成了。我們可以使用上述CSS代碼，將其添加到你的網頁中。當然，根據個人需要，你也可以根據上述代碼進行修改，來實現更加復雜的效果。