css画一个提示框

用css画一个如下图的提示框:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dialog{
            display:inline-block;
            padding:10px;
            border-radius: 4px;
            z-index: 2000;
            font-size: 12px;
            border:1px solid #303133;
            position: relative;
            top: 30px;
            left:50px;
        }
        .dialog .dialog_ico{
            position: relative;
            top: -31px;
        }

        .dialog_ico:after,.dialog_ico:before{
            content:‘‘;
            display:block;
            position:absolute;
            border-style:solid;
            border-width:10px;
        }
        .dialog_ico:before{
            border-color:black transparent transparent  transparent;
            left:20px;
            top:42px;
        }
        .dialog_ico:after{
            border-color:#fff transparent transparent  transparent;
            left:20px;
            top:41px;
        }
    </style>
</head>
<body>
    <div class="dialog">
        <span class="dialog_text">这是提示框</span>
        <div class="dialog_ico"></div>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/fangnianqin/p/9909105.html

时间: 2024-10-17 21:08:49

css画一个提示框的相关文章

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

纯CSS实现tooltip提示框,CSS箭头及形状

原文:纯CSS实现tooltip提示框,CSS箭头及形状 本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容 例: p:after { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; } 具体大家可以参

Android产生一个提示框

可以使用AlertDialog.Builder 才产生一个提示框 首先最简单的是弹出一个消息框: new AlertDialog.Builder(self)                     .setTitle("标题")                    .setMessage("简单消息框")                    .setPositiveButton("确定", null)                     

纯CSS制作冒泡提示框

来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html 在此基础上.今天分享一篇文章给大家.假设利用CSS制作冒泡提示框. 先看2张效果图: CSS: /* 对话气泡 使用方法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-to

div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container"> <!-- 尾巴 --> <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_

Effective前端3:用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是

纯css来实现提示框

用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用title属性时,提示框的样式是默认的,而利用自定义的data-title属性时,提示框的样式和位置自己可以随意定义), 首先,要将鼠标需要悬浮的元素相对定位, 再次,利用hover和伪类的绝对定位来显示提示的内容 代码如下: 1 <!DOCTYPE html> 2 <html lang=&

Effective前端1---chapter 2 用CSS画一个三角形

1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></div> <style> .triangle{ margin: 100px; border-top: 40px solid #000; border-bottom: 40px solid #333; border-left: 40px solid #666; border-right: 40px