CSS倒三角形提示框是一種常見的網頁交互效果，它能夠讓用戶在需要特別注意的地方得到明顯的提示。接下來，我們將講解如何使用CSS來制作一個簡單的倒三角形提示框。

/* 首先，我們定義一個樣式為 .tooltip 的類 */
.tooltip {
position: relative;
display: inline-block; /* 提示框內的內容應在同一行 */
border-bottom: 1px dotted black; /* 描邊 */
}
/* 接著，在 .tooltip 類中，我們定義一個元素為 .tooltiptext 的類 */
.tooltip .tooltiptext {
visibility: hidden; /* 元素默認是隱藏 */
width: 120px; /* 視情況而定 */
background-color: #555; /* 提示框顏色 */
color: #fff; /* 提示文字顏色 */
text-align: center; /* 居中文字 */
padding: 10px; /* 提示框內邊距 */
border-radius: 6px; /* 切圓角 */
position: absolute; /* 絕對定位 */
z-index: 1; /* 保證提示框始終在頂層顯示 */
bottom: 125%; /* 將提示框放在觸發元素的下方 */
left: 50%; /* 將提示框左右居中 */
margin-left: -60px; /* 向左移動一半寬度，使左右居中 */
}
/* 接下來，我們定義倒三角形的樣式 */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* 將三角形放在提示框的下方 */
left: 50%; /* 左右居中 */
margin-left: -5px; /* 向左移動五像素 */
border-width: 5px; /* 三角形大小 */
border-style: solid;
border-color: #555 transparent transparent transparent; /* 設置邊框顏色 */
}
/* 當鼠標懸停在觸發元素上時，顯示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}

現在，我們已經成功地創建了一個簡單的CSS倒三角形提示框。當您的用戶將鼠標懸停在包含 .tooltip 類的元素上時，提示框將自動彈出并向下展開。您可以通過自定義 .tooltip 和 .tooltiptext 類的樣式屬性來進一步改變提示框的顯示效果。