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功能,我们可以通过 ...
随机推荐
- MFCWinInet学习
http://blog.csdn.net/segen_jaa/article/details/6278167 背景: 功能:服务端下载文件 服务端:用Java写Sevlet进行有效性验证 客户端:用C ...
- 【转】vector中erase()的使用注意事项
vector::erase():从指定容器删除指定位置的元素或某段范围内的元素 vector::erase()方法有两种重载形式 如下: iterator erase( iterator _Whe ...
- HDU - 1402 A * B Problem Plus FFT裸题
http://acm.hdu.edu.cn/showproblem.php?pid=1402 题意: 求$a*b$ 但是$a$和$b$的范围可以达到 $1e50000$ 题解: 显然...用字符串模拟 ...
- Alpha 冲刺 （6/10）
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...
- LA 4108 （线段树）
区间更新 + 统计更新长度 稍稍不注意就T了 #include<bits/stdc++.h> #define lson l, m, rt<<1 #define rson m+1 ...
- LVM初级配置
步骤: 1.将物理硬盘转换成物理卷(PV) 创建PV:pvcreate /dev/vdb 2.将PV添加到卷组中(VG) vgcreate vg0 /dev/vdb 3.创建逻辑卷(LV)并从VG中调 ...
- C# 使用EPPlus 秒导出10万条数据
1.先要引用dll文件,可以直接使用vs自带的包管理,如下图: 输入 EPPlus 我这里是安装过了的所以这里显示的是卸载而不是安装. 安装成功了之后会看到这个dll文件 代码如下: //导出Exce ...
- SqlBulkCopy 之 Received an invalid column length from the bcp client for colid 5.
SqlBulkCopy 批量复制报错: Received an invalid column length from the bcp client for colid 5. 翻译:从bcp客户端收到一 ...
- Confluence 6 启用主题评论
页面或者博客页面中显示的评论以下面 2 种方式显示: 主题模式(Threaded):以继承回复的方式显示页面的评论.每一回复的评论将会在不同评论之间显示,以表示各个评论之间的关系. 平面模式(Flat ...
- Confluence 6 订阅所应用的所有小工具
你可以从你的 Jira, Bamboo,FishEye 或 Crucible 站点中订阅所有的小工具到你的 Confluence 小工具目录中.用户可以为他们的页面查找和选择小工具. 希望订阅其他站点 ...