Home >Web Front-end >HTML Tutorial >可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnose
可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:511191browse
今天我们要来分享一款基于纯CSS的气泡提示框，和之前分享的一款jQuery消息提示框插件Tipso类似，整个提示框由箭头和矩形框组成，并且气泡提示框的箭头可以有不同的方向。这款CSS气泡提示框由纯CSS完成，最大的特点就是可以自定义配置，包括文字颜色、背景颜色和箭头方向等。效果图如下：
在线预览 源码下载
实现的代码。
css代码：
.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5;}.arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .arrow_box:after { border-color: rgba(136, 183, 213, 0);[......] via：http://www.w2bc.com/article/css3-genetate-arrow-please
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html+css问题！新手_html/css_WEB-ITnoseNext article：CSS左右固定，中间填满布局_html/css_WEB-ITnose