CSS实现三角形效果

<style>

/* 向上的箭头,类似于A,只有三个边，不能指定上边框 三角形 */

div.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; /* 左边框的宽 */ 
    border-right: 5px solid transparent; /* 右边框的宽 */ 
    border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */ 
    font-size: 0; 
    line-height: 0; 
} 

/* 向下的箭头 类似于 V 三角形*/

div.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f00; 
    font-size: 0; 
    line-height: 0; 
} 

/* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 三角形 */

div.arrow-left { 
    width: 0; 
    height: 0; 
    border-bottom: 15px solid transparent; /* 下边框的高 */ 
    border-top: 15px solid transparent; /* 上方边框的高 */ 
    border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */ 
    font-size: 0; 
    line-height: 0; 
} 

/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 三角形 */

div.arrow-right { 
    width: 0; 
    height: 0; 
    border-bottom: 15px solid transparent; /* 下边框的高 */ 
    border-top: 15px solid transparent; /* 上方边框的高 */ 
    border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */ 
    font-size: 0; 
    line-height: 0; 
} 

/* 基本样式 三角形 */

.tip { 
    background: #eee; 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 8px; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    position: relative; 
    width: 200px; 
} 

/* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 三角形 */

.tip:before { 
    position: absolute; 
    display: inline-block; 
    border-top: 7px solid transparent; 
    border-right: 7px solid #eee; 
    border-bottom: 7px solid transparent; 
    border-right-color: rgba(0, 0, 0, 0.2); 
    left: -8px; 
    top: 20px; 
    content: ''; 
} 

/* 背景阴影 三角形*/

.tip:after { 
    position: absolute; 
    display: inline-block; 
    border-top: 6px solid transparent; 
    border-right: 6px solid #eee; 
    border-bottom: 6px solid transparent; 
    left: -6px; 
    top: 21px; 
    content: ''; 
} 

</style>