使用纯CSS代码创建图标

编写网页的代码布局，一般都是矩形的区域，但是有时候我们需要有一个三角形的箭头，除了使用常规的方法比如背景图片以外，我们还可以使用CSS代码来创建三角形。 很少有人意识到盒子的边界是一层一层向外扩展的，利用这样一种方式，我们设置
一侧的边界是彩色箭头的颜色，其余的都是透明的这样就，能创建出一个三角形，设置不同的border-width，可以创建出各种角度的三角形。 使用纯CSS代码创建三角形
例如下面的代码，我们使用简单的CSS样式，创建除了一个彩色边框的DIV盒子。

.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}

正如你所看到的，三角形的四条边设置了不同的颜色。 这些三角形是直角三角形稍加调整边界大小你可以急性三角形。

.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}

带着一点创造力和扭转,有很多形状,我们可以提出。
border-style:dotted;定义点状边框。在大多数浏览器中呈现为实线。

border-style:dashed;定义虚线。在大多数浏览器中呈现为实线。

border-style:outset;定义 3D outset 边框。其效果取决于 border-color 的值。

border-style:inset;定义 3D inset 边框。其效果取决于 border-color 的值。

border-style:ridge;定义 3D 垄状边框。其效果取决于 border-color 的值。

border-style:groove;定义 3D 凹槽边框。其效果取决于 border-color 的值。

border-style:double;定义双线。双线的宽度等于 border-width 的值。

这是一个典型的聊天消息提示气泡效果，没有使用任何的背景图片。 Buongiorno !

<div class="chat-bubble">
Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}
.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}

这种三角形技术在ie6里面显示会有一点问题，主要是因为ie6不允许透明的边界，但有一个修复的方法。 你需要做的就是给“透明”一边设置完全不同的颜色像粉红色，然后使用过滤器：_filter:
chroma(color=pink);。

/* IE6 */
.chat-bubble-arrow {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}

本文CSS

      .css-arrow-multicolor {
        border-color: red green blue orange;
        border-style: solid;
        border-width: 20px;
        width: 0;
        height: 0;
    }

    .css-arrow-acute {
        border-color: red green blue orange;
        border-style: solid;
        border-width: 25px 10px 15px 30px;
        width: 0;
        height: 0;
    }

    .chat-bubble {
        background-color: #EDEDED;
        border: 2px solid #666666;
        font-size: 35px;
        line-height: 1.3em;
        margin: 10px auto;
        padding: 10px;
        position: relative;
        text-align: center;
        width: 300px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-box-shadow: 0 0 5px #888888;
        -webkit-box-shadow: 0 0 5px #888888;
    }

    .chat-bubble-arrow-border {
        border-color: #666666 transparent transparent transparent;
        border-style: solid;
        border-width: 10px;
        height: 0;
        width: 0;
        position: absolute;
        bottom: -22px;
        left: 30px;
    }

    .chat-bubble-arrow {
        border-color: #EDEDED transparent transparent transparent;
        border-style: solid;
        border-width: 10px;
        height: 0;
        width: 0;
        position: absolute;
        bottom: -19px;
        left: 30px;
    }

    /* IE6 */
    .chat-bubble-arrow {
        _border-left-color: pink;
        _border-bottom-color: pink;
        _border-right-color: pink;
        _filter: chroma(color=pink);
    }

    .mybox {
        margin: 0px;
        padding: 0px;
        border-color: red green blue orange;
        border-width: 20px;
        width: 0px;
        height: 0px;
        color: #464646;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 15px;
        line-height: 27px;
        background-color: #f5f4f0;
    }