首页 » 技术分享 » HTML实现友好提示框(带尖角的框)

HTML实现友好提示框(带尖角的框)

　
评论关闭　824次浏览

友好提示框的主要实现难点就是哪个尖角的问题，其实只要搞清楚三角形的实现原理，实现这种效果也并不难，下面介绍两种实现方法，一种是通过边框实现的三角形通过叠加实现，另一种是通过正方形旋转实现

首先我们讲述一下如何通过边框实现三角形,首先现创建一个div元素，设置宽高为0。

.tri{
    width:0px;
    height:0px;
}
 <div class="tri"></div>

把宽高设置为0，那还怎么构成三角形呢？回看我们的目的-利用边框即border构建三角形，我们添加样式：

.tri {
    width: 0px;
    height: 0px;
    border-right: 20px solid red;
    border-left: 20px solid red;
    border-top: 20px solid black;
    border-bottom: 20px solid black;
}

这里写图片描述
从结果可以看出每个边框是构成一个三角形的，这些三角形都是组合在一起的，怎么拆开呢？其实很简单，只要把其余的边框设置为透明即transparent，修改样式，我们只留下底边框的颜色，其余设置为透明。

.tri {
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid black;
}

这里写图片描述
结果达到了目的，但是时候我们用到的并不是等腰直角三角形，而是变形的其他三角形，这时候我们就要想到，什么在决定边框三角形的—边框宽度，修改样式，这个样式实现普通直角三角形。

    .tri{
        width:0px;
        height:0px;
        border-right: 100px solid red;
        border-left: 0px solid black;
        border-top: 50px solid transparent;
        border-bottom: 0px solid black;
    }

修改样式，实现不规则三角形

    .tri{
        width:0px;
        height:0px;
        border-bottom: 100px solid red;
        border-left: 200px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid transparent;
    }

这里写图片描述
其实总结一下就是根据所需要的三角形的水平边所对的顶点的位置，调整相应的边框的宽度。也许有人会问，没有水平边怎么办？2D旋转可以很好的解决你的问题。

接下来进入正题，如何实现友好提示框呢？正如我们前面所说，实现难点是尖角的问题，我们先来观察一下尖角如何实现。现构建两个div

 <div class="up"></div>
 <div class="down"></div>

这里写图片描述
现在我们把下面那个三角形设置为白色，通过定位移动down，修改样式

.up {
    width: 0px;
    height: 0px;
    border-bottom: 20px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
}

.down {
    position: relative;
    bottom: 38px;
    width: 0px;
    height: 0px;
    border-bottom: 20px solid #fff;
    ;
        border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
}

这里写图片描述
从结果可以看出，下面的白色三角形把上面的黑色三角形覆盖了部分，从而实现了圆角的效果，接下来把其与一个div框拼接就形成了友好提示框

     .simple-tip-box{
        position: relative;
        margin-top: 100px;
        width: 100px;
        border: 1px solid #cccccc;
        background:transparent;    
    }

    .simple-tip-box a{
        display: block;
        text-align: center;
    }

    .up,down{
         position: absolute;
        left: 20px;
        width:0px;
        height:0px;
    }

    .up{
        top:-19px;
        border-bottom: 10px solid black;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
    }

    .down{
        top: -18px;
        border-bottom: 10px solid #fff;;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
    }
 <div class="simple-tip-box">
   <div class="up"></div>
    <div class="down"></div>
   <a>我的任务</a>
   <a>我的百科</a>
   <a>我的词条</a>
   <a>账号设置</a>
   <a>退出</a>
  <div class="clearfix"></div>

这里写图片描述
友好提示框就完成了，颜色有点不太和谐，纯属练习使用。在实际实现时其实可以不用构建两个创建三角形的div，::before,::after是很好的选择，其实就是把.up 和.down改成simpe-tip-box::before和simpe-tip-box::after，这里就不额外示范了。

接下来简要讲述一下怎么利用矩形实现友好提示框，主要讲述如何实现尖角，因为实现了尖角之后就是定位了，跟第一种方法是一样的。我们先构建一个div.

.sq-tri {
    border: 2px solid black;
    width: 20px;
    height: 20px;
}
<div class="sq-tri"></div>

这里写图片描述
结果是一个正方形，那我们怎么得到尖角呢？显然去掉任意两条相邻边就行，这有用到前面讲到的方法–设置透明即transparent，修改样式

.sq-tri {
    border: 2px solid black;
    width: 30px;
    height: 30px;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

这里写图片描述
尖角雏形已经实现出来，但是好像跟我们的预期不一样，我们需要的尖角的顶点向上的，那怎么把顶点方向调整为向上？2D旋转很好的能解决这个问题。根据数学知识可知，逆时针旋转45°可以实现该效果，修改样式

.sq-tri {
    border: 2px solid black;
    width: 30px;
    height: 30px;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-45deg);
}

这里写图片描述
我们想要的尖角已经实现出来，接下来的定位跟第一种实现的方法一样，这里就不一一赘述了。跟前面一样，这种方法也不需要额外构建div元素，可以利用::before元素。

欢迎大家访问笔者的github：https://github.com/delin10/web-里面有一些笔者模仿制作的网页。笔者能力有限，如有纰漏还望指正。

转载自原文链接, 如需删除请联系管理员。

原文链接：HTML实现友好提示框(带尖角的框)，转载请注明来源！

赞 0