纯CSS3实现自定义Tooltip边框涂鸦风格的教程

    border: 0;   
    border-right-width: 30px;   
    border-bottom-width: 20px;   
    border-style: solid;   
    border-color: transparent #fff;   
    display: block;   
    width: 0;   
}  

　　这个box类和之前的类似，不过多了一个特性，就是利用CSS3的:before属性实现了下边框的小三角效果，这样就有tooltip的效果了。

CSS Code复制内容到剪贴板

.box .box {   
    position:absolute;   
    top:5px;   
    left:5px;   
    width:180px;   
    height:80px;   
    border-color:#593207;   
    box-shadow:none;   
}   
.box .box:before {   
    left: 45px;   
    border-color: transparent #593207;   
}  

　　这是最内部的box，和它外面那层box实现一样，同样利用before属性实现小三角效果。

　　其他就是一些边框线颜色和背景颜色的设置，就非常简单了。就不一一写代码了，谢谢阅读，希望能帮到大家，请继续关注软件开发网，我们会努力分享更多优秀的文章。