css3三角形冒泡泡图形制作
<!DOCTYPE html>
<html>
<head>
<title>css 三角形</title>
<style type="text/css">
.test_triangle_border {
width: 200px;
margin: 0 auto 20px;
position: relative;
}
.test_triangle_border a {
colro: #333;
font-weight: bold;
tex-decoration: none;
}
.test_triangle_border .popup {
width: 100px;
background: #fc0;
padding: 10px 20px;
color: #333;
border-radius: 4px;
position: absolute;
top: 30px;
left: 30px;
border: 1px solid #333;
}
.test_triangle_border .popup span {
display: block;
width: 0;
height: 0;
border-width: 0px 10px 10px;
border-style: solid;
border-color: transparent transparent #333;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.test_triangle_border .popup em {
display: block;
width: 0;
height: 0;
border-width: 0px 10px 10px;
border-style: solid;
border-color: transparent transparent #fc0;
position: absolute;
/* 注销之后，变成图二 */
top: 1px;
left: -10px;
/* 注销之后，变成图二 */
}
</style>
</head>
<body>
<div class="test_triangle_border">
<a href="#">三角形</a>
<div class="popup">
<span><em></em></span>纯CSS写带边框的三角形
</div>
</div>
</body>
</html>
css3三角形冒泡泡图形制作的更多相关文章
- CSS3特殊图形制作
CSS3特殊图形制作 现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了.废话不多说,现在开始用CSS3画图 1.心型 //HTML < ...
- CSS3 三角形运用
酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...
- CSS3—三角形
话不多说看效果:演示效果,runjs 1.加了宽高和border,边用不同颜色显示,每条边都是一个梯形 2.去掉宽高,每条边都是三角形 3.只显示其中一条边就是不同的三角形了,是不是很简单,改变bor ...
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...
- react使用引入svg的icon；svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
- border三角形阴影(不规则图形阴影)和多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...
- css border 三角形阴影(不规则图形阴影) & 多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...
- 酷酷的CSS3三角形运用
概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...
- 利用CSS3 clip-path裁剪各种图形。
'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...
随机推荐
- longzhuapp项目笔记
1.配置不同环境的打包命令
- Mudo C++网络库第四章学习笔记
C++多线程系统编程精要 学习多线程编程面临的最大思维方式的转变有两点: 当前线程可能被切换出去, 或者说被抢占(preempt)了; 多线程程序中事件的发生顺序不再有全局统一的先后关系; 当线程被切 ...
- OpenStack实践系列⑦深入理解neutron和虚拟机
OpenStack实践系列⑦深入理解neutron和虚拟机 五.深入理解Neutron 5.1 虚拟机网卡和网桥 [root@node1 ~]# ifconfig brq65c11cc3-8e: fl ...
- Laravel 5.2分页--怎么在一个页面实现两个以上的列表分页，互不影响？
今天就碰到这样的一个问题?想在一个页面里面放两个列表,并且两个列表都可以进行分页. 但是,laravel提供的分页方法很方便,可是两个以上就出问题了,当我点其中一个分页的链接时候,页面上其余的分页跟着 ...
- 【原创】大叔问题定位分享（33）beeline连接presto报错
hive2.3.4 presto0.215 使用hive2.3.4的beeline连接presto报错 $ beeline -d com.facebook.presto.jdbc.PrestoDriv ...
- 玩转 lua in Redis
一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运行在任何平台上,也可以嵌入到大多数语言当中,来扩展其功 ...
- Android之androidmainfest.xml配置文件详解
写配置文件的时候我们会不知道把那些配置项放在哪里,请看: 配置文件样例: <?xml version="1.0" encoding="utf-8"?> ...
- Codeforces 446C DZY Loves Fibonacci Numbers [线段树，数论]
洛谷 Codeforces 思路 这题知道结论就是水题,不知道就是神仙题-- 斐波那契数有这样一个性质:\(f_{n+m}=f_{n+1}f_m+f_{n}f_{m-1}\). 至于怎么证明嘛-- 即 ...
- 软件测试-历史bug回顾（持续更新~）
1.第一次编写程序的时候非常不容易看出的错误就是 = 和 == 的区别. 赋值符号,判断符号之间有着天差地别.导致一直循环错误,一直苦苦找寻愿意无果,一步步看代码解决. 2.对于终结条件判断不是很清楚 ...
- 通过设置ie的通过跨域访问数据源，来访问本地服务
1.首先设置通过域访问数据源 设置通过域访问数据源 2.javascript脚本ajax使用本地服务登录(评价,人证的类似)接口 <html> <head> <scrip ...