分享一个纯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!