自己动手丰衣足食之气泡框和三角形
气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：
拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。
首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。
| 1 | # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} |
如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。
| 1 | # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} |
在主流浏览器中检测一下，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形
通过实验发现当把div的font-size和line-height都设为0的时候，div的四边在IE6下都能形成完美的三角形：
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ; font-size : 0 ; line-height : 0 ;} |
很显然我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随之改变。
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
问题又来了，IE6下transparent无效！其他三边被设置成默认的黑色了。
但通过实验发现把border-style设置为dashed后，IE6下其他三边就能透明了！
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
到这一步我们已经成功的模拟出了一个小三角，下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框，然后把小三角定位到矩形框上。先来写出HTML结构：
| 1 2 3 4 | < div class="tag"> < em > |
CSS样式：
| 1 2 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ;} .tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
效果如下：
现在指示方向的三角形箭头是实心的，而我们想要的是镂空的效果，这里我们再叠加一个同气泡框背景颜色一样的小三角，然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整，如下：
| 1 2 3 4 5 | < div class="tag"> < em > |
CSS样式修改为：
| 1 2 3 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ;} .tag em{ display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} .tag span{ display : block ; border-width : 20px ; position : absolute ; bottom : -33px ; left : 100px ; border-style : solid dashed dashed ; border-color : #FFF transparent transparent ; font-size : 0 ; line-height : 0 ;} |
最终效果如下所示：
注意：叠加的小三角span的bottom值并不是border-width的值，两个小三角bottom的差值理论上应该是2(border-width)2的平方根
最后来把代码优化一下，以便在后期更容易维护，完整的HTML结构：
| 1 2 3 4 5 6 | < div class="tag"> < div class="arrow"> < em > |
CSS样式修改为：
| 1 2 3 4 5 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ;} .arrow{ position : absolute ; width : 40px ; height : 40px ; bottom : -40px ; left : 100px ; } .arrow *{ display : block ; border-width : 20px ; position : absolute ; border-style : solid dashed dashed dashed ; font-size : 0 ; line-height : 0 ; } .arrow em{ border-color : #09F transparent transparent ;} .arrow span{ border-color : #FFF transparent transparent ; top : -7px ;} |
举一反三：不规则三角箭头的气泡框又如何实现？
HTML结构同前面一样：
| 1 2 3 4 5 6 | < div class="tag"> < div class="arrow"> < em > |
矩形框CSS样式稍微改动一下：
| 1 | .tag{ width : 300px ; height : 100px ; position : relative ; background-color : #09F ;} |
重新定位一下三角箭头：
| 1 | .arrow{ position : absolute ; width : 70px ; height : 60px ; left : -70px ; bottom : 10px ;} |
元素相邻的两边border-style值设为solid（显示），另两边设为transparent（不会显示）
| 1 | .arrow *{ display : block ; position : absolute ; border-style : dashed solid solid dashed ; font-size : 0 ; line-height : 0 ; } |
首先模拟一个直角三角形，把一个元素的相邻两边color设为相同的值，另外两边颜色设为透明，即可得到一个直角：
| 1 | .arrow em{ border-color : transparent #09F #09F transparent ; border-width : 30px 35px ;} |
把两个直角三角形重叠在一起就可以得到一个不规则三角形
| 1 | .arrow span{ border-width : 20px 35px ; border-color : transparent #FFF #FFF transparent ; bottom : 0 ;} |
至此，不规则三角箭头的气泡框效果已经实现。
除了通过设置元素的border来模拟小三角之外，还可以用特殊字符来模拟，用特殊字符模拟小三角同样需要用到定位和重叠覆盖，只不过不需要调整border属性了。
先来看一个菱形“◆” ，它在页面中的代码是“◆”，需要注意的是页面编码需要设置为utf-8，在网页中可以把◆当作文字处理，可以通过调整font-size来它的大小、通过color来设置它的颜色。
HTML结构依然用前面的，不同的是在em、span标签中加入了 ◆
| 1 2 3 4 5 6 | < div class="tag"> < div class="arrow"> < em >◆ |
先来设置最外层div的样式，得到一个矩形框：
| 1 | .tag{ width : 300px ; height : 100px ; position : relative ; border : 5px solid #09F ;} |
接着定位箭头最外层容器div，便于观察可以先设置一个背景色 ：
| 1 | .arrow{ position : absolute ; width : 40px ; height : 40px ; left : 100px ; bottom : -40px ; overflow : hidden ;} |
再对◆设置样式：
| 1 | .arrow *{ display : block ; position : absolute ; font-size : 40px ; line-height : 40px ; width : 40px ; font-family :SimSun; font-style : normal ; font-weight : normal ; text-align : center ; vertical-align : middle ;} |
注意：为了◆主流浏览器中显示一致，需要清除浏览器的默认字体样式，特别注意这里字体的设置
再分别修改em、span标签的字体颜色，并对这两个标签定位：
| 1 2 | .arrow em{ color : #09F ; top : -15px ;} .arrow span{ color : #FFF ; top : -22px ;} |
注意：该例子中em和span两个元素垂直方向相差约7px，原来同上面提到的一样，差值理论上应该是2(border-width)2的平方根
完整CSS样式：
| 1 2 3 4 5 | .tag{ width : 300px ; height : 100px ; position : relative ; border : 5px solid #09F ;} .arrow{ position : absolute ; width : 40px ; height : 40px ; left : 100px ; bottom : -40px ; overflow : hidden ;} .arrow *{ display : block ; position : absolute ; font-size : 40px ; line-height : 40px ; width : 40px ; font-family :SimSun; font-style : normal ; font-weight : normal ; text-align : center ; vertical-align : middle ;} .arrow em{ color : #09F ; top : -15px ;} .arrow span{ color : #FFF ; top : -22px ;} |
最终效果如下：
HTML特殊字符查询：http://ikwebdesigner.com/special-characters/
补充：以上方式实现小三角的过程中不可避免的增加了多余的标签，如果不要求所有浏览器中显示一致的话， 我们可以利用css3来实现这个小三角
HTML结构：
| 1 2 3 | < div class="tag"> css3气泡框 |
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ; background-color : #FFF ; } .tag:before,.tag:after{ content : "" ; display : block ; border-width : 20px ; position : absolute ; bottom : -40px ; left : 100px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ; } .tag:after{ bottom : -33px ; border-color : #FFF transparent transparent ; } |
效果同上。
现在看到了很多带小三角形的方框，如微信、Mac版的QQ、QQ空间的时间轴等等，在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着，感觉看着很不错，于是决定亲自动手写一个，我上次用的是偏移背景图片法，那么今天就不用图片，用CSS3实现一下，下面我们来看一下实现代码。
首先我们来看一下CSS3实现三角形原理：其实就是对于transparent的应用
假如html代码是这样的
下面用CSS3分别实现向上、下、左、右的三角形
/*箭头向上*/
.arrow-up {width:0; height:0; border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #fff;
}/*箭头向下*/
.arrow-down {width:0; height:0; border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid #0066cc;
}/*箭头向左*/
.arrow-left {width:0; height:0; border-top:30px solid transparent;border-bottom:30px solid transparent; border-right:30px solid yellow;
}/*箭头向右*/
.arrow-right {width:0; height:0; border-top:50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid green;
}ok代码整理在一起后，效果大概是这样的：
好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。
首先，写出html代码：
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了
挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形，然后绝对定位、设置z-index:-1;、margin-left:-19px;，看下面css代码：
border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层，不影响父级div里面的内容布局。
好了，我们已经完工了，这是
CSS三角形绘制方法，学会了这个，其它的也就简单：http://www.jb51.net/article/42513.htm
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
今天给大家带来 CSS 三角形绘制方法
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！