分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

日期：2012-4-16  来源：GBin1.com

互联网拥有很多免费的工具和应用，几乎可以帮助你实现任何你需要的UI组件和设计，大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗？今天我们将介绍一个在线的生成气泡式提示的web工具 - CSS ARROW PLEASE，希望大家喜欢！

主要特性

• 设置气泡提示位置（上下左右）
• 提示尺寸大小
• 文字颜色
• 边框大小和尺寸
• 边框颜色
• 自动生成css代码

生成代码

.arrow_box {
    position: relative;
    background: #202020; 
    border: 4px solid # ccc;
}
.arrow_box: after, .arrow_box: before {
    top: 100 % ;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer - events: none;
}
.arrow_box: after {
    border - top - color: #202020; 
    border-width: 30px; 
    left: 50%; 
    margin-left: -30px; 
}
 .arrow_box:before { 
    border-top-color: # ccc;
    border - width: 36px;
    left: 50 % ;
    margin-left: -36px;
}

来源：分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!