菱形实现气泡Bubble,菱形画箭头,菱形画三角形
菱形实现气泡Bubble,菱形画箭头,菱形画三角形
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年7月27日 16:32:44 星期三
http://fanshuyao.iteye.com/
一、菱形实现气泡Bubble,效果如下:
二、实现原理:
1、使用2个◆覆盖叠加实现。
2、页面代码:
<div class="mt15">
<div class="bold">菱形实现气泡Bubble</div>
<div class="bubble">
<em>◆</em><span>◆</span>
<div>气泡在此!!气泡在此!!气泡在此!!气泡在此!!气泡在此!!气泡在此!!气泡在此!!气泡在此!!</div>
</div>
</div>
3、css样式:
<style>
<!-- .bubble {
font-size: 14px;
width: 300px;
height: 90px;
padding: 5px 10px;
border: 2px solid #0099FF;
position: relative;
} .bubble div{
position: relative;
}
.bubble em, .bubble span{
display: block;
font-size: 50px;
line-height: 50px;
width: 50px;
font-family: SimSun;
font-style: normal;
font-weight: normal;
text-align: center;
vertical-align: middle;
position: absolute;
left: 200px;
} .bubble em {
/* border-width: 22px;
border-color: #0099FF transparent transparent transparent;
left:-22px; */
color: #0099FF;
bottom: -27px;
} .bubble span {
/* border-color: #FFF transparent transparent transparent; */
color: #fff;
bottom: -24px;
}
-->
</style>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年7月27日 16:32:44 星期三
http://fanshuyao.iteye.com/
菱形实现气泡Bubble,菱形画箭头,菱形画三角形的更多相关文章
- android 使用Canvas画箭头
public class MyCanvas extends View{ private Canvas myCanvas; private Paint myPaint=new Pai ...
- Swift实时画箭头的实现
iOS上实现画箭头,如果是指定了坐标点,那是很简单的,但如果需要做到实时绘制,就需要计算一下了 需求: 在白板上,根据手势落下点和移动点,实时绘制一条箭头直线(如下图) 实现代码: /// 获取箭头的 ...
- SVG 使用marker画箭头(一)
一.使用Marker画箭头 1.定义一个箭头的marker引用 <defs> <marker id='markerArrow' markerWidth='13' markerHeig ...
- WPF画箭头
简介 参考Using WPF to Visualize a Graph with Circular Dependencies的基础上写了一个WPF画箭头的库. 效果图如下: 使用的XAML代码如下: ...
- canvas画箭头demo
效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...
- D2D画箭头的例子
原文:D2D画箭头的例子 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/details/50830102 用处 ...
- 如何用CorelDRAW画箭头?
CorelDRAW,简称为cdr,是一款专业的矢量绘图软件,在设计界也是常用的专业设计之一,在日常的设计工作中,我们常常需要绘制一些特殊的图形,比如箭头.很多对cdr不是特别熟练的小伙伴不知道如何用c ...
- 在matlab 画箭头
[转载]在matlab 画箭头 原文地址:在matlab 画箭头作者:纯情小郎君 完整见链接http://www.mathworks.com/matlabcentral/fx_files/14056/ ...
- javascript画直线和画圆的方法(非HTML5的方法)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [topcoder]TopographicalImage
BFS.这里用了queue,以及在数据结构里存了上一个的高度.也可以递归调用完成BFS,在调用之前做判断:http://community.topcoder.com/stat?c=problem_so ...
- 【HDOJ】2955 Robberies
01背包.将最大金额作为容量v.概率做乘法. #include <stdio.h> #include <string.h> #define mymax(a, b) (a> ...
- WCF的配置文件中的要素
Windows Communication Foundation Configuration Schema
- 利用if else 求房贷
static void Main(string[] args) { while (true) //主要就是公式的运用和if else 的嵌套 ...
- [ZOJ 3631] Watashi's BG
Watashi's BG Time Limit: 3 Seconds Memory Limit: 65536 KB Watashi is the couch of ZJU-ICPC Team ...
- 将eclipse新建项目的默认编码GBK改为UTF-8
在eclipse下: 新建项目默认编码设置:Window->Preferences->General->Workspace->Text file encoding 将其改为UF ...
- 【转】Android中如何使用Bundle传递对象[使用Serializable或者Parcelable] -- 不错
原文网址:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1211/694.html Android中Bundle类的作用 Bun ...
- GeoServer地图开发解决方案
转自:http://www.cnblogs.com/beniao/archive/2011/01/08/1930822.html GeoServer 是 OpenGIS Web 服务器规范的 J2EE ...
- HTML快速入门5——不规则表格、表格背景、边框颜色
转自:http://blog.csdn.net/ysuncn/article/details/2214153 不规则表格 例子: <table border=1><tr>< ...
- 关于.ToList(): LINQ to Entities does not recognize the method ‘xxx’ method, and this method cannot be translated into a store expression.
LINQ to Entities works by translating LINQ queries to SQL queries, then executing the resulting quer ...