纯css设置气泡

/*css代码*/

/* poptip */

.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}

.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}

.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}

.poptip-arrow em{color: #FFBB76;}

.poptip-arrow i{color: #FFFCEF;text-shadow:none;}

.poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}

.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}

.poptip-arrow-top{top: -6px;}

.poptip-arrow-top em{top: -1px;}

.poptip-arrow-top i{top: 0px;}

.poptip-arrow-bottom{bottom: -6px;}

.poptip-arrow-bottom em{top: -8px;}

.poptip-arrow-bottom i{top: -9px;}

.poptip-arrow-left{left:-6px;}

.poptip-arrow-left em{left:1px;}

.poptip-arrow-left i{left:2px;}

.poptip-arrow-right{right:-6px;}

.poptip-arrow-right em{left:-6px;}

.poptip-arrow-right i{left:-7px;}

/*html结构*/

<div class="poptip">

    <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>

    <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span>

    <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span>

    <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>

    注销

</div>

时间: 2024-08-01 23:40:22

纯css设置气泡的相关文章

纯CSS设置Checkbox复选框控件的样式

下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中.这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框. 样式一 此复选框

纯css 画气泡

我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一个三角框. 我们先来看看用css如何画三角形:  css绘三角形之 border方法 先画一个100*100的矩形,给他四边加上不同颜色的边框.代码如下: .demo{ width:100px; height:100px; border:50px solid ;border-color:red pi

72.纯 CSS 创作气泡填色的按钮特效

原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> <li> home <span></span><span></span><span></span><span></span> </li> </ul> </nav> CS

纯CSS实现气泡框

效果图如下: 源码: <!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title></title> <style type="

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

如何用纯 CSS 创作气泡填色的按钮特效

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/ceBEytp 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/

纯CSS实现的气泡提示框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta charset=&quo

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left