圆角带箭头的提示框css实现
css是一个很强大的东西，很多网页效果，我们可以通过css直接实现。今天给大家分享的是一个用css实现的圆角带箭头的提示框。
效果如下图：
这一个样式主要涉及到了css的边框样式border的运用和定位样式position。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角带箭头的框</title>
<style>
body{
padding-top: 200px;
}
.box{
border-radius: 5px;
border: 1px solid red;
width: 300px;
height: 150px;
position: relative;
}
.box .s{
width: 0;
height: 0;
border-color: transparent transparent #FA0505 transparent;
border-style: dashed dashed solid dashed;
border-width: 10px;
position: absolute;
top: -20px;
left: 20px;
}
.box .s .i{
width: 0;
height: 0;
border-color: transparent transparent #fff transparent;
border-style: dashed dashed solid dashed;
border-width: 10px;
position: absolute;
top: -9px;
left: -10px;
}
</style>
</head>
<body>
<div class="box">
<s class="s">
<i class="i"></i>
</s>
</div>
</body>
</html>
圆角带箭头的提示框css实现的更多相关文章
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
- DIV+CSS实现左侧带三角形的提示框
实现效果
- echarts 更改tooltip提示框CSS样式
最近 做项目,用过echarts,发现tooltip提示z-index级别很高,想更改下,看了下文档:https://www.echartsjs.com/zh/option.html#tooltip. ...
- css实现带箭头选项卡
这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...
- 纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- popover带箭头弹框
我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Pres ...
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
- easyui 消息提示框
1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager. ...
随机推荐
- Win7如何删除家庭组
发表于 2010-07-15 11:38:06 [YY团]Win7家庭组不能正常使用的解决办法 只是把近期碰到的一个小毛病的解决方案共享一下罢了,估计碰到这问题的人不会很多-- 表现是家庭组不能正常访 ...
- 回顾 git 常用命令
git init 在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹. git clone 获取一个u ...
- Java构建工具_Ant详解
1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台 --因为 ...
- 使用PostSharp在.NET平台上实现AOP
摘自:http://www.cnblogs.com/leoo2sk/archive/2010/11/30/aop-postsharp.html 本文首先介绍AOP(面向方面编程)的相关概念及理论,然后 ...
- java基础讲解01-----简单了解一下java
2017-4-12(晚) 闲来无事,静静把自己了解的java,好好回忆一次.如果能帮助别人也好.会不断补充 java有关的书籍真的很多,我也不过多的介绍了. 1.什么是java 2.java的语言特 ...
- FTP服务搭建与配置
FTP介绍 大企业用的基本都是自动化发布工具,会用GIT企业发布的版本上传到服务器, 使用vsftpd搭建ftp服务(上) http://blog.csdn.net/qq_26941173/artic ...
- 저장소system.runtime.remoting.messaging.callcontext
https://msdn.microsoft.com/ko-kr/library/system.runtime.remoting.messaging.callcontext(v=vs.110).asp ...
- MySQL索引长度限制问题
在修改表结构时出现了错误:Specified key was too long;max key length is 1000 bytes. MySQL版本为Server version: 5.1.36 ...
- win 7 下vim的使用
1.gVim74.exe ftp://ftp.vim.org/pub/vim/pc/gvim74.exe 2.vimcdoc-1.9.0-setup.exe 中文说明文档 http://211.147 ...
- 【剑指offer】Q17:合并两个排序的链表
def Merge(head1, head2): if head1 == None: return head2 if head2 == None: return head1 psuhead = Lis ...