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

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

首先我们讲述一下如何通过边框实现三角形,首先现创建一个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实现友好提示框(带尖角的框)相关推荐

css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果发布时间:2021-03-20 09:44:20 来源:亿速云阅读:58 作者:小新这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话 ...
html矩形加三角,html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
html5如何文本框去角,HTML5如何实现尖角号
本篇教程探讨了HTML5如何实现尖角号,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 首先,来写一个简单的代码: html> Title .arrow ...
python PyQt5中文教程☞【第二节】PyQt5基本功能（创建窗口、应用程序图标、显示提示语、通过按钮关闭窗口、消息框（关闭窗口确认框）、窗口显示在屏幕中间【居中显示】）
引用文章:http://code.py40.com/pyqt5/ 文章目录简单的例子:创建一个小窗口应用程序的图标显示提示语通过按钮关闭窗口消息框(关闭窗口确认框) 窗口显示在屏幕的中间[居 ...
ios新手开发——toast提示和旋转图片加载框
不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...
C#带按钮的文本框TextBoxContainButton
经常需要用到各种组合控件,每次组合太麻烦,通过打包成自定义控件,方便调用. 带按钮的文本框,如下图: 文本框内可以输入文本,响应文本框内容变化事件,按钮可以设置点击事件,图标通过3个组合控件实现. ...
基于CSS实现的尖角提示符
CSS实现的尖角提示一.概述 ...
【office】Visio 2010 画大括号 + 调整大括号尖角居中（对称）
参考网址: 1)https://blog.csdn.net/lanxinju/article/details/5782878 Visio 2010 画大括号 Visio 大括号,依次点击:更多形状 ...
京东搜索框html,京东添加搜索框代码模块点击搜索按钮失效提示您访问的页面失联啦的处理方法...
京东店铺装修搜索框模块时搜索框按钮点击无效无法搜索.不少美工在京东店铺装修过程中自定义设计安装的搜索框加好链接后点击搜索框按钮提示抱歉!您访问的页面失联啦-是怎么回事?是加的搜索框地址不对吗?那么要怎 ...

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

HTML实现友好提示框(带尖角的框)相关推荐

最新文章

热门文章