11种方法实现一个tips带有描边的小箭头（更新中...）

李涛发布于2019-08-02 13:58 / 2309人阅读

摘要：查看效果第六种和背景描边旋转此方法就是设置一个宽度和高度分别为的方块背景，然后背景相邻的两条边描边再有的属性旋转角度，来实现箭头的朝向。

我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边，本章不涉及svg/canvas，没必要因为我讲的是css。

主体样式：

</>复制代码 
w3cbest我是一个tips
 .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前端开发获得授权，非商业转载请注明原链接及出处。

GPU云服务器云服务器三种实现方法防御ddos攻击的11种方法 linux 中箭头 java中排序箭头

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53477.html

11种方法实现一个tips带有描边的小箭头（更新中...）

摘要：查看效果第六种和背景描边旋转此方法就是设置一个宽度和高度分别为的方块背景，然后背景相邻的两条边描边再有的属性旋转角度，来实现箭头的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边...

oneasp 2019-08-30 15:55 评论0 收藏0
使用SVG + CSS实现动态霓虹灯文字效果

摘要：早上无意间进入一个网站，看到他们的效果略屌，如图刚开始以为是动画之类的，审查元素发现居然是用动画实现的，顿时激起了我的欲望，决定要一探究竟，查看代码之后，发现原理居然是如此简单多个描边动画使用不同的即可对于一个形状元素或文本元素，可以使用早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：showImg(https://segmentfault.com/img/bVT9At?w...

IntMain 2019-08-29 13:19 评论0 收藏0
canvas基础知识点（一）

摘要：给设置宽高标签的宽高默认是是一个行内块元素可以在标签上通过，来设置可以在中给对象设置注意不要通过来调整的宽高导致内部的画布被拉伸，图形变形获取画笔工具绘图都是通过标签的画笔来进行的注意，不要写成，里面传入的参数目前也只有这一种情况描边和填充给canvas设置宽高： canvas标签的宽高默认是300*150,是一个行内块元素可以在canvas标签上通过width，height...

ephererid 2019-08-01 18:30 评论0 收藏0

发表评论

登陆后可评论

0条评论

李涛

男|高级讲师

我要关注我要私信

TA的文章

SSL证书是一个域名一个证书吗？多个域名能用一张SSL证书吗？

阅读 1444·2021-11-22 13:54
大连虚拟主机怎么选择-如何选择虚拟主机？

阅读 2577·2021-09-22 15:36
CSS 入门

阅读 2900·2019-08-30 15:54
微信公众号开发之坑（一）

阅读 938·2019-08-30 15:53
HTML、CSS基础 {未完待续}

阅读 3303·2019-08-30 15:53
前端每日实战：19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

阅读 661·2019-08-29 15:21
常用浏览器私有属性小记

阅读 3003·2019-08-28 18:28
重新认识caniuse

阅读 3191·2019-08-26 13:37

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

11种方法实现一个tips带有描边的小箭头（更新中...）

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章