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功能,我们可以通过 ...
随机推荐
- Shell编程中while与for的区别及用法详解【转】
在shell编程中经常用到循环,常用的循环有for和while循环两种.while循环默认以行读取文件,而for循环以空格读取文件切分文件,本篇就结合现网的一些使用示例说说二者的用法和区别. 一.常用 ...
- xpath 中 [<Element a at 3985984dj343>]
在写爬虫用xpath抓取数据的时候出现了这个问题,列表中都是很多个 < element > 首先这不是报错,也不是你的xpath语法有错. 将这个数据列表循环,循环出的item就是你想要的 ...
- requests库入门06-post请求
示例相应的接口文档:GitHub邮箱接口文档 先登录GitHub,然后右上角用户下拉框中选择settings,然后选Emails.可以看到当前账户设置的邮箱情况 再看添加邮箱接口的文档描述,可以通过一 ...
- 用函数SendARP()获取局域网计算机的MAC地址
sendARP 31 说明对方没有开机,我们的函数检测不到它, 1784 说明的给函数的最后一个参数的值是0,或你的给的值与你给的缓存区大小不符合. 如果返回31不在线,则最后一个参数指针指向的值赋值 ...
- 【转】gcc命令中参数c和o混合使用的详解
gcc -c a.c 编译成目标文件a.o gcc a.c 生成执行文件a.exe gcc -o a -c a.c 编译成目标文件a gcc -o a a.c 生成执行文件a. ...
- Mybatis--01
mybatis 封装jdbc访问代码的一个框架 (hibernate) ORM对象关系映射 SpringMVC:用来封装servlet的框架 (struts) Spring:体系整合框架,其他框架的 ...
- $Django 路飞之课程下的分类,用户登陆成功前端存cookie,
一 课程分类显示 宗旨:总的再次过滤 二 Cookie # export default new Vuex.Store({ state: { name:'', token:'', }, mutatio ...
- web缓存服务器varnish-4.1.6的部署及配置详解
web缓存服务器varnish-4.1.6的部署及配置详解 1.安装varnish4.1.6安装依赖 yum install -y autoconf automake jemalloc-devel l ...
- mysql的group by查询
下面是多种写法,针对使用group by后得到最新记录的测试及结果: 说明:我在测试的时候,因为我的表数据在增加,得到最新的数据可能不同 -- 1.得到每个分组中id最小的那条记录 select * ...
- Hystrix系列-5-Hystrix的资源隔离策略
转自:https://blog.csdn.net/liuchuanhong1/article/details/73718794 Hystrix的资源隔离策略有两种,分别为:线程池和信号量. 说到资源隔 ...