CSS
/* tampilan standar */ .note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:white; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:white white #658E15 #658E15; background-color:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2); display:block; width:0; /* Firefox 3.0 damage limitation */ } /* dengan tepi tumpul */ .note.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } .note.rounded:before { border-width:8px; border-color:white white transparent transparent; -webkit-border-radius:0 0 0 5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }Kerangka HTML
<div class='note'> Konten di sini... </div> <div class='note rounded'> Konten di sini... </div>
Sumber: http://nicolasgallagher.com
Sumber https://www.dte.web.id/