CSS提示框是網頁中常用的一個功能,可以通過CSS樣式來實現。其中一個重要的組成部分是提示框箭頭,本文將介紹如何用CSS來制作提示框箭頭。
首先,我們需要知道如何制作一個普通的提示框。下面是一個簡單的代碼:
.tool-tip { position: relative; display: inline-block; padding: 6px 12px; background-color: #efefef; border-radius: 4px; } .tool-tip::before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #efefef transparent; }
這個代碼將會生成一個含有提示框箭頭的DIV元素,鼠標懸浮其上即可以顯示提示信息。關于這個代碼的詳細解釋可以參考其他文章。
接下來我們要給這個提示框添加箭頭。箭頭的樣式和位置分別通過before偽元素的border屬性和top、left屬性來控制。其中箭頭樣式使用的是border屬性的“三角形”效果,即通過border-width和border-color屬性來控制。
下面是最終的代碼:
.tool-tip { position: relative; display: inline-block; padding: 6px 12px; background-color: #efefef; border-radius: 4px; } .tool-tip::before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #efefef transparent; } .tool-tip::after { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #efefef transparent transparent transparent; }
其中,我們新增了一個after偽元素,并設置了top、left、border-width和border-color屬性,分別來控制箭頭的位置、大小和顏色。
通過調整上述代碼中的數值,我們可以更改箭頭的樣式和位置,來滿足不同的需要。
下一篇css表格邊框線加粗