純CSS實(shí)現(xiàn)對(duì)白框

liangzai_cool 發(fā)布于2019-08-01 16:11 / 729人閱讀

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

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

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

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

有幾個(gè)細(xì)節(jié)需要注意：

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

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

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

GPU云服務(wù)器云服務(wù)器純CSS css文本框下拉框css css下拉框

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50355.html

相關(guān)文章

純CSS實(shí)現(xiàn)對(duì)白框

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

jlanglang 2019-08-30 13:20 評(píng)論0 收藏0
用 :focus-within 實(shí)現(xiàn)純 CSS 下拉框組件

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

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

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

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

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

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

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

junbaor 2019-08-02 15:17 評(píng)論0 收藏0