HTML CSS examples for CSS Widget:Arrow
HTML div comment box with arrow
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .left { width: 920px !important; padding-bottom: 40px; min-height: auto !important; padding-right: 0; float: left; } .left > p:first-of-type { background: #ffd987; font-style: italic; padding: 5px 10px; margin-bottom: 40px; } .tip {<!--from w ww . j av a2 s. co m--> background: #fff; border: 1px solid #ccc; padding: 10px; font-size: 1.2em; position: relative; width: 200px; } .tip:before { position: absolute; top: -14px; left: 98px; display: inline-block; border-right: 14px solid transparent; border-bottom: 14px solid #fff; border-left: 14px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .tip:after { position: absolute; top: -12px; left: 99px; display: inline-block; border-right: 12px solid transparent; border-bottom: 12px solid #fff; border-left: 12px solid transparent; content: ''; } .tip.left:before { border-top: 14px solid transparent; border-right: 14px solid #fff; border-bottom: 14px solid transparent; border-right-color: rgba(0, 0, 0, 0.2); left: -28px; top: 20px; } .tip.left:after { border-top: 12px solid transparent; border-right: 12px solid #fff; border-bottom: 12px solid transparent; left: -24px; top: 22px; } </style> </head> <body> <div style="padding:50px"> <div class="tip left"> this is a test this is a test this is a test this is a test </div> </div> </body> </html>