css实现三角提示框
一、创建不带边框的提示框：
之前已介绍过怎么生成三角形，直接代码如下：
<style>
body {
margin: 0;
padding: 0;
background: grey;
}
/*提示框容器*/
.tip {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
background: #fff;
padding: 10px;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*提示框-左三角*/
.tip-trangle-left {
position: absolute;
bottom: 15px;
left: -10px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
}
/*提示框-右三角*/
.tip-trangle-right {
position: absolute;
top: 15px;
right: -10px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
}
/*提示框-上三角*/
.tip-trangle-top {
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #fff;
}
/*提示框-下三角*/
.tip-trangle-bottom {
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
}
</style>
<div class="tip">
<div class="tip-trangle-left"></div>
我是提示框<br/>
内容可以自定义
</div>
<div class="tip">
<div class="tip-trangle-right"></div>
我是提示框<br/>
内容可以自定义
</div>
<div class="tip">
<div class="tip-trangle-top"></div>
我是提示框<br/>
内容可以自定义
</div>
<div class="tip">
<div class="tip-trangle-bottom"></div>
我是提示框<br/>
内容可以自定义
</div>
以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:
二、创建带边框的提示框：
第一步实现了不带边框的提示框，如果要实现带边框的提示框，原理是先把提示框容器加上边框，然后通过伪元素，在需要带箭头的边框上面生成2个三角形，最后改变最上面的三角形的颜色（和提示框的内容背景色相同），即可实现。代码如下：
<style>
body {
margin: 0;
padding: 0;
background: grey;
}
/*提示框容器-上三角形*/
.tip-top {
margin: 20px;
padding: 5px;
width: 300px;
height: 60px;
border: 2px solid #f99;
position: relative;
background-color: #FFF;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*生成2个叠加的三角形*/
.tip-top:before, .tip-top:after {
content: "";
display: block;
border-width: 15px;
position: absolute;
top: -30px;
left: 100px;
border-style: solid dashed dashed solid;
border-color: transparent transparent #f99 transparent;
font-size: 0;
line-height: 0;
}
/*将上面的三角形颜色设置和容器背景色相同*/
.tip-top:after {
top: -27px;
border-color: transparent transparent #FFF transparent;
}
/*下三角*/
.tip-bottom {
margin: 20px;
padding: 5px;
width: 300px;
height: 60px;
border: 2px solid #f99;
position: relative;
background-color: #0FF;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tip-bottom:before, .tip-bottom:after {
content: "";
display: block;
border-width: 15px;
position: absolute;
bottom: -30px;
left: 100px;
border-style: solid dashed dashed solid;
border-color: #f99 transparent transparent transparent;
font-size: 0;
line-height: 0;
}
.tip-bottom:after {
bottom: -27px;
border-color: #0FF transparent transparent transparent;
}
/*左三角*/
.tip-left {
margin: 20px;
padding: 5px;
width: 300px;
height: 60px;
border: 2px solid #f99;
position: relative;
background-color: #FFF;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tip-left:before, .tip-left:after {
content: "";
display: block;
border-width: 15px;
position: absolute;
left: -30px;
top: 20px;
border-style: dashed solid solid dashed;
border-color: transparent #f99 transparent transparent;
font-size: 0;
line-height: 0;
}
.tip-left:after {
left: -27px;
border-color: transparent #FFF transparent transparent;
}
/*右三角*/
.tip-right {
margin: 20px;
padding: 5px;
width: 300px;
height: 60px;
border: 2px solid #f99;
position: relative;
background-color: #FFF;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tip-right:before, .tip-right:after {
content: "";
display: block;
border-width: 15px;
position: absolute;
right: -30px;
top: 20px;
border-style: dashed solid solid dashed;
border-color: transparent transparent transparent #f99;
font-size: 0;
line-height: 0;
}
.tip-right:after {
right: -27px;
border-color: transparent transparent transparent #FFF;
}
</style>
<div class="tip-top">
我是提示框<br/>
内容可以自定义
</div>
<div class="tip-bottom">
我是提示框<br/>
内容可以自定义
</div>
<div class="tip-left">
我是提示框<br/>
内容可以自定义
</div>
<div class="tip-right">
我是提示框<br/>
内容可以自定义
</div>
</body>
以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:
参考：https://www.cnblogs.com/houxianzhou/p/14651537.html
css实现三角提示框相关推荐
- 用 CSS实现Bubble提示框的两种方法
第一种方法:主要是通过css border属性来实现,两个小三角形叠加,实现小箭头: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
- toastr-min.css,Toastr插件提示框使用说明
插件Toastr jquery toastr 一款轻量级的通知提示框插件.sCkN9RPz7d2wJmoY4rGWKQ==iuU1PG74aYQ+jeLjArjF9A==1jmg5WMkCsKrwtp ...
- css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈 提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
- 原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
- 好看的css 显示 php,HTML+CSS实现好看的三角形提示框样式
在浏览网站时,大家有没有发现网站中有各式各样新颖的提示框,那你知道这些好看的提示框怎么制作的吗?这篇文章就和大家分享一个CSS实现的好看的三角形提示框,有一定的参考价值,感兴趣的朋友可以参考一下. 想 ...
- html5 气泡文字提示框,css实现气泡文字提示框代码教程
css气泡文字提示框 实现的等腰直角三角形式的对话框 效果如下: 代码如下: css: .arrow span{border-color:#0FF #000 #f00 #ff0 ; top:0px;} ...
- css3实现缺角四边形_用CSS制作Bubble缺角提示框代码
CSS实现Bubble提示框的方法 .poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px ...
最新文章
- python怎么下载-下载 python
- windows7 设置 Local Settings权限为可以访问
- 刘晓艳2021英语语法句型结构总结1之简单句型结构
- python学习笔记一
- 相机标定(三) —— 畸变校正
- Linux：为什么那么多人讨厌systemd?
- java中关闭数据库连接_在Java中关闭数据库连接
- 手把手带你玩摄像头模组
- 【历史上的今天】 5 月 5 日：微软发布 Windows 98 SE ；领英上线；键盘布局的改革者
- 计算机视觉-OpenCV(银行卡号识别)
- 一维码和二维码开源库zint学习
- 文学家是什么时候出现的
- MySQL查询不同年份母亲节_计算某年母亲节是哪一天_晴空呐的博客-CSDN博客
- 逆転裁判5android,逆转裁判5安卓-phoenix wright: ace attorney dual destinies官方app2021免费...
- python怎么撤销_用Python玩转微信（三）—— 查看撤回消息
- iphone之Info.plist的属性
- Android手机电池耐用吗,八款超长待机的智能手机 大容量电池十分耐用
- GWAS计算BLUE值3--LMM考虑残差异质计算BLUE值
- 微信小程序 虚拟现实_开发虚拟现实应用程序的重要性
- terminate called after throwing an instance of 'std::cad_alloc' what():std::bad_alloc