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

oneasp 發(fā)布于2019-08-30 15:55 / 1198人閱讀

摘要：查看效果第六種和背景描邊旋轉(zhuǎn)此方法就是設(shè)置一個(gè)寬度和高度分別為的方塊背景，然后背景相鄰的兩條邊描邊再有的屬性旋轉(zhuǎn)角度，來(lái)實(shí)現(xiàn)箭頭的朝向。

我們?cè)诰W(wǎng)頁(yè)開(kāi)發(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)來(lái)說(shuō)說(shuō)如何給tips小箭頭描邊，本章不涉及svg/canvas，沒(méi)必要因?yàn)槲抑v的是css。

主體樣式：

w3cbest我是一個(gè)tips


 .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來(lái)模擬實(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描邊來(lái)實(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);
    }
}

查看效果

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

第三種方法和第一種類似，通過(guò)兩層顏色疊加在有層級(jí)的偏移來(lái)實(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;
    }
}

查看效果

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

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

.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è)置不同的顏色，再通過(guò)兩層背景顏色疊加，經(jīng)過(guò)層級(jí)偏移再有transform的rotate屬性旋轉(zhuǎn)角度，來(lái)實(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背景描邊旋轉(zhuǎn)

此方法就是設(shè)置一個(gè)寬度和高度分別為10px的方塊背景，然后背景相鄰的兩條邊描邊再有transform的rotate屬性旋轉(zhuǎn)角度，來(lái)實(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前端開(kāi)發(fā)
互動(dòng)： 如有疑問(wèn)可進(jìn)群討論
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@w3cbest前端開(kāi)發(fā)獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。

云服務(wù)器 GPU云服務(wù)器三種實(shí)現(xiàn)方法防御ddos攻擊的11種方法 linux 中箭頭 java中排序箭頭

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

oneasp

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

銀行ATM存取款系統(tǒng)（C語(yǔ)言實(shí)現(xiàn)）

閱讀 2263·2021-11-23 09:51
超三分之一外部攻擊通過(guò)利用漏洞進(jìn)行第三方軟件風(fēng)險(xiǎn)顯著增加

閱讀 1056·2021-11-18 10:02
ZJI全新上架香港站群服務(wù)器,4C段238個(gè)IP月付1400元起

閱讀 3458·2021-10-13 09:49
asp虛擬主機(jī)是什么意思-asp木馬是什么意思？

閱讀 1284·2021-09-22 14:57
甲骨文申請(qǐng)，無(wú)需信用卡，有PayPal即可

閱讀 10593·2021-08-18 10:20
11種方法實(shí)現(xiàn)一個(gè)tips帶有描邊的小箭頭（更新中...）

閱讀 1199·2019-08-30 15:55
收到美企第一份offer，分享經(jīng)歷

閱讀 2244·2019-08-29 16:06
簡(jiǎn)單的支持網(wǎng)頁(yè)畫框拖拽縮放功能的js插件

閱讀 3248·2019-08-29 11:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章