11种实现小箭头提示的方法（更新中...）

.dui-tips{位置：相对的;填充：10px；文本对齐：居中；边框：1px实心#f60；边界半径：5px；背景色：#fff；它是为其中一个边设置颜色宽度和样式。这里我使用了两个伪类进行折叠，在彩色伪类上面覆盖了一个白色的伪类，然后偏移1px来模拟1px的描边效果。代码如下：.dui-tips{&:before,&:after{position:absolute;左：50%；显示：表格；宽度：0；高度：0；内容：'';转换：翻译（-50%，0）；边框宽度：10px10px010px；边框样式：实心；}&:before{z-index:0;底部：-10px；边框颜色：#f60透明透明透明；}&:after{z-index:1;底部：-8px；边框颜色：#fff透明透明透明；}}查看效果第二个边框描边结合filterdrop-shadow属性:第二种是第一种的扩展，利用filter滤镜的drop-shadowstroke实现，box-shadow和drop-shadow实现不规则投影。dui-tips{&:after{位置：绝对；左：50%；显示：表格；宽度：0；高度：0；内容：'';转换：翻译（-50%，0）；边框宽度：10px10px010px；边框样式：实心；;边框颜色：#fff透明透明透明；过滤器：阴影（0px2px0px#f60）；}}查看效果第三种方法是用特殊符号或者双层字体覆盖第三种方法和第一种方法类似，通过两层颜色叠加一个层次偏移来实现.dui-tips{&:before,&:after{字体大小：24px;行高：18px；位置：绝对；左：50%；显示：表格；内容：'◆';转换：翻译（-50%，0）；文本对齐：居中；}&:before{z-index:0;底部：-10px；颜色：#f60；}&:after{z-index:1;底部：-8px；颜色：#fff；}}查看效果第四种方式是通过text-shadow实现这种分布设置1px的阴影以显示描边效果。dui-tips{&:after{font-size:24px;行高：18px；位置：绝对；左：50%；显示：表格；内容：'◆';转换：翻译（-50%，0）；文本对齐：居中；z-索引：1；底部：-8px；颜色：#fff；文本阴影：02px0#f60；双层覆盖设置两个宽高分别为10px的正方形背景，然后为两层背景设置不同的颜色，然后叠加两层背景颜色，层偏移后，有旋转角度transform的rotate属性，实现箭头的方向.dui-tips{&:before,&:after{位置：绝对；左：50%；显示：表格；宽度：10px；高度：10px；内容：'';左边距：-5px；变换：旋转（-45deg）；}&:before{z-index:0;底部：-6px；背景色：#f60；}&:after{z-index:1;底部：-5px；背景色：#fff；}}查看效果第六种方法是背景和边框背景描边旋转这种方法是先设置一个正方形背景，宽高分别为10px，然后对背景相邻的两条边进行描边，旋转角度为transform的rotate属性来实现箭头的方向。.dui-tips{&:after{位置：绝对；左：50%；显示：表格；宽度：10px；高度：10px；左边距：-5px；内容：'';变换：旋转（-45deg）；z-索引：1；底部：-6px；border-bottom:1pxsolid#f60;border-left:1pxsolid#f60;背景色：#fff；}}查看效果第七种background和box-shadow.dui-tips{&:after{position:absolute;左：50%；显示：表格；宽度：10px；高度：10px；内容：'';左边距：-5px；变换：旋转（-45deg）；z-索引：1；底部：-5px；背景色：#fff；框阴影：-1px1px0#f60；}}查看效果第八种linear-gradient.dui-tips{&:before,&:after{position:absolute;左：50%；显示：表格；宽度：10px；高度：10px；内容：'';左边距：-5px；转换：旋转（-135度）；}&:before{z-index:0;底部：-6px；背景：线性渐变（-45deg，透明7px，#f600）；}&:after{z-index:1;底部：-5px；背景：线性渐变（-45deg，透明7px，#fff0）；}}查看效果第9种linear-gradient和box-shadow.dui-tips{&:after{position:absolute;左：50%；显示：表格；宽度：10px；高度：10px；内容：'';左边距：-5px；变换：旋转（-135deg）；z-索引：1；底部：-5px；背景：线性渐变（-45deg，透明7px，#fff0）；box-shadow:-1px-1px0#f60}}查看效果第十种linear-gradient和border.dui-tips{&:after{position:absolute;左：50%；显示：表格；宽度：10px；高度：10px；内容：'';左边距：-5px；变换：旋转（-135deg）；z-索引：1；b底部：-6px；背景：线性渐变（-45deg，透明7px，#fff0）；border-top:1pxsolid#f60;border-left:1pxsolid#f60;}}查看效果第十一行。dui-tips{&:before,&:after{位置：绝对；左：50%；显示：表格；宽度：0；高度：0；内容：'';变换：旋转（45度）；;轮廓宽度：5px；}&:before{z-index:0;底部：-1px；轮廓颜色：#f60；}&:after{z-index:1;底部：0；轮廓颜色：#fff；}}查看效果作者：w3cbest前端开发互动：如有疑问可进群讨论讨论本文原创性，版权归作者所有。商业转载请联系@w3cbest前端开发获得授权。非商业转载请注明原文链接和出处。