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实现的更多相关文章

  1. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  2. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  3. DIV+CSS实现左侧带三角形的提示框

    实现效果

  4. echarts 更改tooltip提示框CSS样式

    最近 做项目,用过echarts,发现tooltip提示z-index级别很高,想更改下,看了下文档:https://www.echartsjs.com/zh/option.html#tooltip. ...

  5. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  6. 纯CSS实现tooltip提示框，CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  7. popover带箭头弹框

    我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Pres ...

  8. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  9. easyui 消息提示框

    1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager. ...

随机推荐

  1. 云计算之路-试用Azure：Azure内置的负载均衡是四层的

    当初迁移至阿里云遇到的第一个问题是在程序中通过Request.UserHostAddress得到的是负载均衡(SLB)的内网IP,而不是用户的真实IP.真实IP存储在服务器变量HTTP_X_Forwa ...

  2. C#计算时间间隔的方法小结

    初始化两个时间变量用于演示实例. DateTime dt1 = new DateTime(2013, 10, 13, 19, 15, 50); DateTime dt2 = new DateTime( ...

  3. 网络编程入坑基础-BIO总结

    IO总结 前提 参考资料: <Java I/O> -- 这本书没有翻译版,需要自己啃一下. <Java I/O>这本书主要介绍了IO和NIO的相关API使用,但是NIO部分并不 ...

  4. iOS百度地图

    一.百度地图sdk具体使用过程,參考以下的博客(我感觉非常具体.并且有问题能够找楼主.他会给解答,感谢好心人-): 怎样使用百度地图sdk,及相关demo下载 上述博客给的demo,是真机执行的(百度 ...

  5. 【微信小程序】loading标签使用，可自定义时长

    前言:loading和wx.showToast的区别: wx.showToast加载的时间长度是需要手动设置的,默认1500ms,而loading标签则可以配合数据加载进行隐藏. 核心就是在数据量较大 ...

  6. Swift的String与OC的NSString的区别

    Swift的String类型是值类型.如果你创建了一个新的字符串值,那么当其进行常量.变量赋值操作或在函数/方法中传递时,会进行值拷贝. 在不同的情况下,都会对已有字符串值创建新的副本,并对该新副本进 ...

  7. RabbitMQ的应用场景以及基本原理介绍(转载)

    1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...

  8. (转)解决WinDbg调试Dump文件不同环境mscordacwks.dll版本问题

    解决WinDbg调试Dump文件不同环境mscordacwks.dll版本问题   开发人员提交一个dump文件(Windows Server 2008 R2),当前调试环境Windows Serve ...

  9. .NET面试题（一）

    1.请编程遍历页面上所有TextBox控件并给它赋值为string.Empty? foreach (System.Windows.Forms.Control control in this.Contr ...

  10. window.print

    function contentPrint(contentArea) { var initBody = document.body.innerHTML; if ($("div"). ...