溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

11種方法實(shí)現(xiàn)一個(gè)tips帶有描邊的小箭頭

發(fā)布時(shí)間：2020-07-21 21:08:46 來源：網(wǎng)絡(luò) 閱讀：144 作者：w3cbest_com 欄目：web開發(fā)

我們?cè)诰W(wǎng)頁開發(fā)中實(shí)現(xiàn)一個(gè)tips時(shí)會(huì)有一個(gè)小箭頭，實(shí)現(xiàn)這種方法的文章網(wǎng)上已經(jīng)泛濫了，但有時(shí)實(shí)現(xiàn)這個(gè)小箭頭不止只有單純的三角它還有描邊，今天我們就借那些現(xiàn)有的文章在深入一點(diǎn)來說說如何給tips小箭頭描邊，本章不涉及svg/canvas，沒必要因?yàn)槲抑v的是css。

主體樣式：

<div class="dui-tips"><a >w3cbest我是一個(gè)tips</a></div>

 .dui-tips{
        position: relative;
        padding: 10px;
        text-align: center;
        border: 1px solid #f60;
        border-radius: 5px;
        background-color: #fff;
    }

第一種border描邊雙層覆蓋：

就是大家常用的border，實(shí)現(xiàn)原理就是給其中一條邊設(shè)置顏色寬度及樣式，我這里使用了兩個(gè)偽類進(jìn)行折疊，將一個(gè)白色的覆蓋在有顏色的偽類上面，再偏移1px來模擬實(shí)現(xiàn)1px的描邊效果，代碼如下：

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: translate(-50%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;
    }
    &:before {
        z-index: 0;
        bottom: -10px;
        border-color: #f60 transparent transparent transparent;
    }
    &:after {
        z-index: 1;
        bottom: -8px;
        border-color: #fff transparent transparent transparent;
    }
}

查看效果

第二種border描邊結(jié)合濾鏡drop-shadow屬性：

第二種是第一種的延伸，使用濾鏡filter的drop-shadow描邊來實(shí)現(xiàn)，box-shadow和drop-shadow實(shí)現(xiàn)不規(guī)則投影

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: translate(-50%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;

        bottom: -9px;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0px 2px 0px #f60);
    }
}

查看效果

第三種通過特殊符號(hào)或字體雙層覆蓋

第三種方法和第一種類似，通過兩層顏色疊加在有層級(jí)的偏移來實(shí)現(xiàn)

.dui-tips {
    &:before, &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: '◆';
        transform: translate(-50%, 0);
        text-align: center;
    }
    &:before {
        z-index: 0;
        bottom: -10px;
        color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: -8px;
        color: #fff;
    }
}

查看效果

第四種通過text-shadow實(shí)現(xiàn)

這種放發(fā)通過給文子設(shè)置1px的陰影來顯描邊效果

.dui-tips {
    &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: '◆';
        transform: translate(-50%, 0);
        text-align: center;

        z-index: 1;
        bottom: -8px;
        color: #fff;
        text-shadow: 0 2px 0 #f60;
    }
}

查看效果

第五種 background雙層覆蓋

這種方式設(shè)置兩個(gè)寬度和高度分別為10px的方塊背景，再給兩層背景分別設(shè)置不同的顏色，再通過兩層背景顏色疊加，經(jīng)過層級(jí)偏移再有transform的rotate屬性旋轉(zhuǎn)角度，來實(shí)現(xiàn)箭頭的朝向。

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: -5px;
        transform: rotate(-45deg);
    }
    &:before {
        z-index: 0;
        bottom: -6px;
        background-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: -5px;
        background-color: #fff;
    }
}

查看效果

第六種background和border

此方法就是設(shè)置一個(gè)寬度和高度分別為10px的方塊背景，然后背景相鄰的兩條邊描邊再有transform的rotate屬性旋轉(zhuǎn)角度，來實(shí)現(xiàn)箭頭的朝向。

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        content: '';
        transform: rotate(-45deg);

        z-index: 1;
        bottom: -6px;
        border-bottom: 1px solid #f60;
        border-left: 1px solid #f60;
        background-color: #fff;
    }
}

查看效果

第七種background和box-shadow


.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: -5px;
        transform: rotate(-45deg);

        z-index: 1;
        bottom: -5px;
        background-color: #fff;
        box-shadow: -1px 1px 0 #f60;
    }
}

查看效果

第八種linear-gradient

.dui-tips{
    &:before, &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: -5px;
        transform: rotate(-135deg);
    }
    &:before {
        z-index: 0;
        bottom: -6px;
        background: linear-gradient(-45deg, transparent 7px, #f60 0);
    }
    &:after {
        z-index: 1;
        bottom: -5px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
    }
}

查看效果

第九種linear-gradient和box-shadow

.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: -5px;
        transform: rotate(-135deg);

        z-index: 1;
        bottom: -5px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
        box-shadow: -1px -1px 0 #f60
    }
}

查看效果

第十種linear-gradient和border


.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: -5px;
        transform: rotate(-135deg);

        z-index: 1;
        bottom: -6px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
        border-top: 1px solid #f60;
        border-left: 1px solid #f60;
    }
}

查看效果

第十一種ouline

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: rotate(45deg);
        outline-style: solid;
        outline-width: 5px;
    }
    &:before {
        z-index: 0;
        bottom: -1px;
        outline-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: 0;
        outline-color: #fff;
    }
}

查看效果

作者： w3cbest前端開發(fā)
互動(dòng)： 如有疑問可進(jìn)群討論
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@w3cbest前端開發(fā)獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手