カスタマイズ可能な矢印を備えた CSS3 バブル プロンプト ボックスconfiguration_html/css_WEB-ITnose

今日は、純粋な 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