css实现带边框，半透明气泡定位浮层效果

这里的气泡是用来做图片的浮层提示，所以定位点是在最下方，使用transform: translateY(calc(-100% - 13px)) translateX(-20px);将内容区域放在定位点上方。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>body{background:#0f30a1 ;}/* 气泡 */.bubble {position: absolute;left: 13.7vw;width: 4px;height: 4px;top: 50vw;background-color: red;}.bubble-main {position: absolute;transform: translateY(calc(-100% - 13px)) translateX(-20px);min-width: 120px;padding: 10px;font-size: 12px;border-radius: 4px;display: inline-block;color: #fff;border: 1px solid #027de0;background: rgba(39, 48, 73, 0.5);}/* 第一层 颜色和边框一致，用于制作边框 */.bubble-triangle1 {position: absolute;border-top: 13px solid #027de0;border-left: 7px solid transparent;border-right: 7px solid transparent;bottom: 5px;left: -5px;z-index: 2;}/* 第二层 颜色和大背景一致，用于第三层的半透明效果更真实 */.bubble-triangle2 {position: absolute;bottom: 7px;left: -5px;width: 0;height: 0;border-top: 14px solid #1836a0;border-left: 7px solid transparent;border-right: 7px solid transparent;z-index: 3;}/* 第三层 颜色为气泡内部背景色 */.bubble-triangle3 {position: absolute;bottom: 7px;left: -5px;width: 0;height: 0;border-top: 14px solid rgba(39, 48, 73, 0.5);border-left: 7px solid transparent;border-right: 7px solid transparent;z-index: 4;}</style>
</head>
<body><div class="bubble"><div class="bubble-main"><div class="bubble-title">标题2222</div><p class="bubble-item">内容2222</p></div><!-- 中间层三角形 --><div class="bubble-triangle1"></div><div class="bubble-triangle2"></div><div class="bubble-triangle3"></div></div>
</body>
</html>

css实现带边框，半透明气泡定位浮层效果相关推荐

三种方法实现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果, 用三种方法实现弹出框边框半透明和圆角的效果 1.用rgba来实现背景半透明,设置内边距 2.设置b ...
css 实现带边框三角的气泡框（带三角箭头）
效果图: 实现原理: 底部一个带边框的矩形,顶部一个只带两条边的边框矩形,并旋转45度. 代码: <div class="shape"></div> .sh ...
css画带边框三角形,纯CSS画三角形（带边框）
实例一: Title .find-div-body{ position: relative; top:30px; right:0px; width:400px; height:200px; paddi ...
原生js+css实现带预览图片的幻灯片效果实例
先总结一下,里面的用到的关键知识点 CSS中用到的知识点有: 过渡效果:transition,下面是语法,用到时候一般要加上浏览器内核前缀.本实例中主要用到过渡的地方是opacity和right tr ...
拒绝假空心！纯css实现真·空心带边框直角三角形和空心带边框直角梯形！
需求 ↑需要实现一个背景为半透明且带边框的直角梯形百谷解决方案碰到问题,程序猿的优良传统,先百谷一下(?) 得到的解决方案总结一下有这些: 1.利用border交界处为斜边来制作,即border- ...
纯css实现带斜角的边框样式
纯css实现带斜角的边框样式,是边框哦展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了个花里胡哨的办法) 直接贴代码说明下原理展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了 ...
css画横线箭头_css 画带边框的箭头的问题
我圈调直年情,量的单框来离理这接法清都的为想要用css画一个如下图的箭需朋朋支带不新器功几的事上为做的和时意后头,带边框思路很简单,用一个带坐上下边框的长方形,拼一个灰色的三角形,然后在用一个白色的 ...
html 带边框的梯形,css clip-path画带边框梯形多边形
css clip-path画带边框梯形多边形项目案例一(自适应梯形) 项目案例二(渐变色多边形) 项目案例一(自适应梯形) 如下梯形区域为模块的title信息,要求title文字个数变化时梯形区域随 ...
HTML图片链接边框半透明,请教，下图登录页如何用css实现？半透明的边框怎么做？...
谢谢各位答主的答案,参考了下,然后去学习了下css3属性box-shadow和border-image,自己写的一个demo 登录页demo 1. 背景 div铺满整个屏幕,再给div添加背景图片以达 ...

css实现带边框，半透明气泡定位浮层效果

css实现带边框，半透明气泡定位浮层效果相关推荐

最新文章

热门文章