HTML CSS examples for CSS Widget:Shape
Link with border and down triangle
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .tri-down {<!--from ww w . j ava2 s. c o m--> position: relative; margin-bottom: 2em; padding: 1em; border: 1px solid #999; background: #f3f3f3; border-radius:5px; } .tri-down:before, .tri-down:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0; } .tri-down:before { bottom: -16px; left: 21px; border-top-color: #777; border-width: 16px; } .tri-down:after { bottom: -15px; left: 22px; border-top-color: #f3f3f3; border-width: 15px; } </style> </head> <body> <div class="tri-down"> this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test </div> </body> </html>