純CSS實現(xiàn)對白框

jlanglang 發(fā)布于2019-08-30 13:20 / 978人閱讀

摘要：如果一個盒子的長寬都為零，那么它的四條就會碰到一起，變成實心的，而且每一條都是一個三角形我們就可以利用三角形來實現(xiàn)對白框的尖下巴?？梢杂煤蛡卧貋韺崿F(xiàn)，也可以在大盒子里放置小盒子再絕對定位。

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

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

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

有幾個細節(jié)需要注意：

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

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/115485.html

純CSS實現(xiàn)對白框

摘要：如果一個盒子的長寬都為零，那么它的四條就會碰到一起，變成實心的，而且每一條都是一個三角形我們就可以利用三角形來實現(xiàn)對白框的尖下巴?？梢杂煤蛡卧貋韺崿F(xiàn)，也可以在大盒子里放置小盒子再絕對定位。如果一個盒子的長寬都為零，那么它的四條border就會碰到一起，變成實心的，而且每一條border都是一個三角形；我們就可以利用三角形來實現(xiàn)對白框的尖下巴。通過把border上左設置為有顏色，...

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

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

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

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

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

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

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

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

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