用css偽類實現提示對話方塊的小三角,哈哈!

2021-08-15 03:58:01 字數 872 閱讀 7245

今天實現下圖提示表單提示框側邊的小三角。其實很簡單,具體如下

1.首先把對話方塊用div或其他塊級元素先畫出來,進行乙個相對於大容器的absolute絕對定位,調整到合適位置。

2.用偽類元素after給每個上述的塊級元素新增小三角。直接上**:(這裡我用的p標籤)

p:after

原理:建立乙個只設定邊框大小,寬高都為0的盒子,然後將根據需要將邊框的某三邊顏色設定為透明(transparent),可建立各個方向的小三角。

注意:由於建立的偽類元素是行內元素,進行絕對定位absolute之後元素性質發生改變(由行內元素變成了塊級元素)。然後根據需要調整位置,這樣乙個對話提示框就製作完畢啦。

擴充套件:如果要實現聚焦表單時提示框才顯示,可以用focus偽類實現:聚焦時顯示,否則隱藏。上述表單的整個實現**如下:

html文件被解析沒了,只能貼了。

css實現簡單對話方塊

html部分 class dialog box class div class rectangle 對話方塊div section css部分 1.先實現乙個底朝右邊的等腰三角形 上下邊框為背景色透明 右邊框為背景色為 bfc 左邊框不設定 2.其次實現乙個矩形 設定圓角 3.最後將容器的設為彈性盒...

對話方塊的實現

發現自己學過的東西要是不去複習的話,慢慢就忘了,還是記個部落格,做個記錄,便於以後複習。效果圖 實現 簡單對話方塊的實現 public void click1 view view 設定取消按鈕 builder.setnegativebutton 取消 new dialoginte ce.onclic...

css對話方塊的寫法

最近比較忙,好久沒有維護部落格了,在這裡表示歉意。最近主要在做touchweb的專案,那麼我就記錄一下我在做這個專案中的問題吧,當然,今天主要是從css開始。後面部落格會陸續記錄其他的問題,例如延遲載入 的canvas渲染 jquery模擬下拉選擇以及highchart圖表 高德地圖 swipe滑動...