对话框气泡，总能在一些设计中给人一种清晰的感觉，在这里我们用css3技术来设计了几种对话框。 在第一个案例中，主要使用:before&:after创建两个三角形，一个和背景色一样，一个和边框色一样；在第二个案例中主要使用:before和rotate，利用旋转来达到我们需要的效果；第三个是一个倾斜的三角其实也有两种方法一个就是两个三角形叠加一个就是demo中的旋转了；第四种比较复杂，一两句说不完，还是自己看吧

设计了三种常用的文章标签，第一个是圆角效果比较简单，主要思路就是非等的对称的圆角；第二个主要应用了ribbon，使用:before生成；第三个就稍微麻烦点，三角加上一个小圆点，使用:before和:after生成，看来不错啊。

第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不支持圆角，所以比起border来outline很是不足啊。

这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。

sofish在《CSS quiz: 带边 border 的三角形》制作介绍了使用border制作三角的兼容方案，很实用的一个东东。目前这种效果在Web中的运用是越来越多，有很多同学也想尽办法：有使用图片的，有使用border的，当然还有使用其他方法的。今天我要为大家介绍的是使用“::after”和"::before"配合border制作带边三角提示框，并为大家推荐一个在线制作工具。只不过这种方法不兼容IE8以及其以下的浏览器。如果要兼容IE，建议使用sofish的方法。

这种实例其实在css3刚出的时候就比较风靡了，也算是入门级的很好实例吧，还是很值得去练练手的。它主要是对css3的:before和:after的应用，当然再加上一些rotate的旋转及box-shadow的阴影，最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果（如:hover:before；:hover *；:hover + *），所以该实例用webkit内核浏览器来看，鼠标滑过直接就到生硬的最后状态，没有动画过程。

本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用，一般来说我们经常会使用宽高为0，然后再运用border来设计一个三角出来，可是这里是应用border三角和一个宽度或高度的结合，设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠，:after生成一个阴影色的旋转下的折叠。

说起来惭愧，这个实例以前看起来的时候，看得莫名其妙，一时云里雾里。于是静下心来仔细研究下，才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了，各位firebug就可以知道了，设置的height是为0，然后line-height为30px，其实这个还不是关键，关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-color来改变的，至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作，加上上一个实例，不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊，人家这才是高水平的应用。

本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。