11種方法實現一個tips帶有描邊的小箭頭（更新中...）

w3cbest發表於2018-12-25

圖片描述

我們在網頁開發中實現一個tips時會有一個小箭頭，實現這種方法的文章網上已經氾濫了，但有時實現這個小箭頭不止只有單純的三角它還有描邊，今天我們就借那些現有的文章在深入一點來說說如何給tips小箭頭描邊，本章不涉及svg/canvas，沒必要因為我講的是css。

主體樣式：

<div class="dui-tips"><a href="http://www.w3cbest.com">w3cbest我是一個tips</a></div>


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

第一種border描邊雙層覆蓋：

就是大家常用的border，實現原理就是給其中一條邊設定顏色寬度及樣式，我這裡使用了兩個偽類進行摺疊，將一個白色的覆蓋在有顏色的偽類上面，再偏移1px來模擬實現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描邊結合濾鏡drop-shadow屬性：

第二種是第一種的延伸，使用濾鏡filter的drop-shadow描邊來實現，box-shadow和drop-shadow實現不規則投影

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

檢視效果

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

第三種方法和第一種類似，通過兩層顏色疊加在有層級的偏移來實現

.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實現

這種放發通過給文子設定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雙層覆蓋

這種方式設定兩個寬度和高度分別為10px的方塊背景，再給兩層背景分別設定不同的顏色，再通過兩層背景顏色疊加，經過層級偏移再有transform的rotate屬性旋轉角度，來實現箭頭的朝向。

.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背景描邊旋轉

此方法就是設定一個寬度和高度分別為10px的方塊背景，然後背景相鄰的兩條邊描邊再有transform的rotate屬性旋轉角度，來實現箭頭的朝向。

.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前端開發
互動： 如有疑問可進群討論
本文原創，著作權歸作者所有。商業轉載請聯絡@w3cbest前端開發獲得授權，非商業轉載請註明原連結及出處。

相關文章