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功能,我们可以通过 ...
随机推荐
- 自学MVC看这里——全网最全ASP.NET MVC 教程汇总（转）
自学MVC看这里——全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要 ...
- NodeJS基础教程
关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...
- 【转】Java finally语句到底是在return之前还是之后执行？
网上有很多人探讨Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被执行?很多人都说不是,当然他们的回答是正确的,经过试验,至少有两种情况下final ...
- hostapd修改beacon帧和probe response帧
在AP模式下,热点会不断定期地发送Beacon帧来宣告自己存在,告知设备可以加入网络: Probe Response帧是用于应答Probe Request帧,Probe Request帧是移动工作站用 ...
- 解决log4j和self4j日志报错Could NOT find resource [logback.groovy]及Could NOT find resource [logback-test.xml]问题
事件背景: 我的log4j和self4j按照网上的配置,配置成功了,但是报错如下: 让我很是郁闷,于是找了一大圈........ 解决方案: 总结来说就是:log4j.properties和logba ...
- [PHP]flock文件IO锁的使用
一.flock概述 bool flock ( resource $handle , int $operation [, int &$wouldblock ] ) 参数 handle 文 ...
- 硬盘性能测试工具fio
如何衡量云硬盘的性能 IOPS:每秒读/写次数,单位为次(计数).存储设备的底层驱动类型决定了不同的 IOPS. 吞吐量:每秒的读写数据量,单位为MB/s. 时延:IO操作的发送时间到接收确认所经过的 ...
- 12)django-ORM(单表返回数据3种方式)
单表查询还回数据有3种形式,返回形式不一样,模板调用方式不同 1)返回Queryset里面内容为对象:Business.objects.all() 这里内容显示是对象 2)返回Queryset里面内容 ...
- 数字、ip转换python实现
# 数字 ==> ip # 数字范围[0, 255^4] >>> num2ip = lambda x: '.'.join([str(x/(256**i)%256) for i ...
- react轮播图----react-slick
1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...