11種方法實(shí)現(xiàn)一個(gè)tips帶有描邊的小箭頭-創(chuàng)新互聯(lián)

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

泰州網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

主體樣式：

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

查看效果

第三種通過特殊符號或字體雙層覆蓋

第三種方法和第一種類似，通過兩層顏色疊加在有層級的偏移來實(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)過層級偏移再有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)載請聯(lián)系@w3cbest前端開發(fā)獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明原鏈接及出處。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：11種方法實(shí)現(xiàn)一個(gè)tips帶有描邊的小箭頭-創(chuàng)新互聯(lián)
瀏覽路徑：http://muchs.cn/article34/deepse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、虛擬主機(jī)、定制開發(fā)、用戶體驗(yàn)、網(wǎng)站改版、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)