CSS实现带箭头的提示框效果【示例代码】

网页制作 2024/12/29 佚名

3 1 2

我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了；

先上效果图：

原理分析：

上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；

首先新建一个div，画出提示框的轮廓

<div class="demo"></div>

给定样式：

    .demo{
        width:100px;
        height:100px;
        position:absolute;
        top: 35%;
        left:40%;   
        border:2px solid red;
        border-radius:8px;
    }

这样，我们简单的一个正方形提示框就出来；

关键点：

现在我们在class=“demo”的div里面加入一个子级元素div

 <div class="demo">
        <div class="shixin"></div>
    </div>

添加样式：

    .shixin{
        width:0;
        height:0;
        border:100px solid ;
        border-color:red green yellow blue;
        position: relative;
        top: -21%;
        left:15%;
    }

宽高都设为0；然后设置一个边框的宽度，暂且设为100，边框颜色自己设定；此时的应该是一个200*200的正方形，因为上下边框相加为200px；左右边框相加为200px；

效果图：

然后我们现在只需要它的下面（下面的三角形）的一部分；

 .shixin{
        width:0;
        height:0;
        border:100px solid transparent;
        border-bottom-color:red;
        position: relative;
        top: -21%;
        left:15%;
    }

切记：border属性的颜色一定要写为transparent（透明），不然默认为黑色；然后我们需要下面的三角形，我们只需要用border-bottom-color属性给下边框添加颜色即可称为实心三角形；

然后我们适当的调整一下大小，三角形的大小是通过border的宽度来调的，因为这个其实就是border的宽度；

就这样，一个实心的三角形提示框效果已经出来了，但是别人UI框架都是空心的啊，没关系，我们接着往下走：

在class="demo"的div下面再加一个div

  <div class="demo">
        <div class="shixin"></div>
        <div class="kongxin"></div>
    </div>

添加样式：

    .kongxin{
        width:0;
        height:0;
        border:10px solid transparent;
        border-bottom-color:#fff;
        position: relative;
        top: -39%;
        left:15%;
    }

看到了吗？我们给这个三角形也是添加一样的样式，实现空心效果其实就是将三角形的颜色改为背景色，背景默认为白色，然后通过position：relative相对定位移到实心三角形处进行重合即可；

总结

以上所述是小编给大家介绍的CSS实现带箭头的提示框效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

css箭头输入框，css,输入框

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“CSS实现带箭头的提示框效果【示例代码】”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

CSS实现带箭头的提示框效果【示例代码】

CSS实现标签效果的示例代码

使用css创建一个优惠券的方法

评论“CSS实现带箭头的提示框效果【示例代码】”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接