純CSS實現對白框

jlanglang 發布于2019-08-30 13:20 / 902人閱讀

摘要：如果一個盒子的長寬都為零，那么它的四條就會碰到一起，變成實心的，而且每一條都是一個三角形我們就可以利用三角形來實現對白框的尖下巴。可以用和偽元素來實現，也可以在大盒子里放置小盒子再絕對定位。

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

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

html代碼：

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;
}

有幾個細節需要注意：

#demo:after的兩條有色邊框應該與盒子的背景顏色相同，所以要記得給盒子設置背景顏色，而不是透明；此處我將盒子背景設置為與邊框相同的白色。

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

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

GPU云服務器云服務器純CSS css文本框下拉框css css下拉框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115485.html

純CSS實現對白框

摘要：如果一個盒子的長寬都為零，那么它的四條就會碰到一起，變成實心的，而且每一條都是一個三角形我們就可以利用三角形來實現對白框的尖下巴。可以用和偽元素來實現，也可以在大盒子里放置小盒子再絕對定位。如果一個盒子的長寬都為零，那么它的四條border就會碰到一起，變成實心的，而且每一條border都是一個三角形；我們就可以利用三角形來實現對白框的尖下巴。通過把border上左設置為有顏色，...

liangzai_cool 2019-08-01 16:11 評論0 收藏0
用 :focus-within 實現純 CSS 下拉框組件

摘要：借用的例子當點擊表單中的文本框時需高亮整個表單元素。但是表單內部的文本框獲得焦點并不代表表單元素本身有焦點，所以使用并不能生效，這時就可以使用當然這也是的其中一個典型用法。 :focus-within 偽類：當本節點或其子節點獲得焦點時被激活。借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 當點擊表單中的文本框時需高亮整個表單元素。但是表單內部的文...

崔曉明 2019-08-29 15:25 評論0 收藏0
用 :focus-within 實現純 CSS 下拉框組件

摘要：借用的例子當點擊表單中的文本框時需高亮整個表單元素。但是表單內部的文本框獲得焦點并不代表表單元素本身有焦點，所以使用并不能生效，這時就可以使用當然這也是的其中一個典型用法。 :focus-within 偽類：當本節點或其子節點獲得焦點時被激活。借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 當點擊表單中的文本框時需高亮整個表單元素。但是表單內部的文...

focusj 2019-08-02 10:28 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

摘要：輸入框的屬性允許您指定沒有輸入內容時出現在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據輸入框是否有內容來決定是否顯示這個元素。在這篇文章中，我們將使用:placeholder-shown偽類創建一個浮動的問題標簽效果，使用純CSS實現。 showImg(https://segmentf...

arashicage 2019-08-30 11:09 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

摘要：輸入框的屬性允許您指定沒有輸入內容時出現在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據輸入框是否有內容來決定是否顯示這個元素。在這篇文章中，我們將使用:placeholder-shown偽類創建一個浮動的問題標簽效果，使用純CSS實現。 showImg(https://segmentf...

junbaor 2019-08-02 15:17 評論0 收藏0