CSS完成带箭头的提醒框实际效果【示例编码】

日期:2020-12-10 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

大家在许多UI架构中看到带箭头的提醒框,觉得挺好看,可是以前1直不知道道其基本原理,今日在网上找了些材料算是搞清楚基本原理了;

先上实际效果图:

基本原理剖析:

上面的箭头有木有感觉很像1个3角形,是的,它便是3角形;只但是它这个尖角是根据两个3角形来完成的;

最先新建1个div,画出提醒框的轮廊

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

给定款式:

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

这样,大家简易的1个正方形提醒框就出来;

重要点:

如今大家在class=“demo”的div里边添加1个子级元素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: ⑵1%;
        left:15%;
    }

宽高都设为0;随后设定1个边框的宽度,姑且设为100,边框色调自身设置;此时的应当是1个200*200的正方形,由于左右边框相加为200px;上下边框相加为200px;

实际效果图:

随后大家如今只必须它的下面(下面的3角形)的1一部分;

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

谨记:border特性的色调1定要写为transparent(全透明),要不然默认设置为黑色;随后大家必须下面的3角形,大家只必须用border-bottom-color特性给下边框加上色调便可称为实心3角形;

随后大家适度的调剂1下尺寸,3角形的尺寸是根据border的宽度来调的,由于这个实际上便是border的宽度;

就这样,1个实心的3角形提醒框实际效果早已出来了,可是他人UI架构全是空心的啊,没事儿,大家接着往下走:

在class="demo"的div下面再加1个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: ⑶9%;
        left:15%;
    }

看到了吗?大家给这个3角形也是加上1样的款式,完成空心实际效果实际上便是将3角形的色调改成情况色,情况默认设置为白色,随后根据position:relative相对性精准定位移到实心3角形处开展重叠便可;
 

总结

以上所述是网编给大伙儿详细介绍的CSS完成带箭头的提醒框实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!