如果乙個盒子的長寬都為零，那麼它的四條border就會碰到一起，變成實心的，而且每一條border都是乙個三角形；我們就可以利用三角形來實現對白框的尖下巴。
通過把border上左設定為有顏色，下右設定為透明，在#demo:before放置乙個向下的等邊三角形，絕對定位使之頂部與大盒子的下邊框重合。
再通過把border上左設定為白色，下右設定為透明，在大三角形裡面放置乙個白色小三角形，覆蓋掉一部分顏色，就形成了尖下巴。
可以用#demo:before和#demo:after偽元素來實現，也可以在大盒子裡放置小盒子再絕對定位。
html**：
#demo
#demo:before
#demo:after
#demo:after的兩條有色邊框應該與盒子的背景顏色相同，所以要記得給盒子設定背景顏色，而不是透明；此處我將盒子背景設定為與邊框相同的白色。
此處有絕對定位，可以不給border設定width:0px;height:0px;，正常情況是需要的，否則邊框就會拉伸成一行。
如下圖，黑三角形的兩條邊框減去白三角形的兩條邊框等於(c+d)，而為了美觀，d應該約等於a(c必須是整數，所以a不可能是整數)，這裡需要一些計算。
純css來實現提示框
用js用多了，就疏忽了最基本的css了 用title屬性來實現提示框。下面言歸正傳 如何用css實現提示框 1 利用title屬性來實現滑鼠滑過某個元素時，實現提示整段內容的功能 利用title屬性時，提示框的樣式是預設的，而利用自定義的data title屬性時，提示框的樣式和位置自己可以隨意定義...
純css實現模態框動態垂直居中
乙個垂直居中的思路，不止限於模態框 用bootstrap模態框時，常見的幾種垂直居中方法是 1.在開啟時用js計算 model on shown.bs.modal function e 但這種有個缺陷，如果模態框裡內容改變時，模態框大小也會跟著變，此時就無法垂直居中了。2.利用translate 5...
純CSS實現乙個氣泡框
實現原理 主要通過css的border color屬性，結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子，別忘記此盒子需加上position relative，不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...