純CSS實作對白框

如果一個盒子的長寬都為零，那麼它的四條border就會碰到一起，變成實心的，而且每一條border都是一個三角形；我們就可以利用三角形來實現對白框的尖下巴。

透過把border上左設定為有顏色，下右設定為透明，在#demo:before放置一個向下的等邊三角形，絕對定位使其頂部與大盒子的下邊框重合。
再透過把border上左設定為白色，下右設定為透明，在大三角形裡面放置一個白色小三角形，覆蓋掉一部分顏色，就形成了尖下巴。
可以用#demo:before和#demo:after偽元素來實現，也可以在大盒子裡放置小盒子再絕對定位。

html代碼：

<p></p>

css代碼：

#demo {
    width: 200px;
    height: 100px;
    background:#FFF;
    border: 8px solid #666;
    border-radius: 30px;
    box-shadow: 2px 2px 4px #888;
    position: relative;
}
            
#demo:before {
    content:"";
    position: absolute;
    left: 30px;
    top: 100px;
    border: 25px solid;
    border-color: #666 transparent transparent #666;
}
            
#demo:after {
    content:"";
    position: absolute;
    left: 38px;
    top: 100px;
    border: 15px solid;
    border-color: #FFF transparent transparent #FFF;
}

有幾個細節要注意：

1. #demo:after的兩條有色邊框應該與盒子的背景一樣記得盒子的背景。背景顏色，而不是透明；此處我將盒子背景設定為與邊框相同的白色。

2. 此處有絕對定位，可以不給border設定width:0px;height:0px;，正常情況是需要的，否則邊框就會拉伸成一行。

3. 如下圖，黑三角形的兩條邊框減去白三角形的兩條邊框等於(c+d)，而為了美觀，d應該約等於a(c必須是整數，所以a不可能是整數) ，這裡需要一些計算。
   

更多純CSS實現對白框相關文章請關注PHP中文網！