杰晶网络

css 11种方法实现一个tips带有描边的小箭头
网页制作 2024/11/23 佚名
3 2

我们在网页开发中实现一个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;
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css,tips,带有描边小箭头
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网