11种方法实现一个tips带有描边的小箭头

发布时间:2020-07-21 21:08:46 作者:w3cbest_com
来源:网络 阅读:151

我们在网页开发中实现一个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前端开发获得授权,非商业转载请注明原链接及出处。

推荐阅读:
  1. webgl实现物体描边效果的方法介绍
  2. anime.js如何实现带有描边动画效果的复选框

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css css3

上一篇:VMware Workstation 创建虚拟机(以安装CentOS7 为例)

下一篇:利用Azure Backup备份虚拟机之十一:停止与删除备份

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》