HTML CSS examples for CSS Widget:Shape
Add border to triangle
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .slide{<!--from ww w . ja v a2 s . c o m--> position: relative; padding: 15px; } .arrow { max-width: 300px; background-color: #E01616; position: absolute; top: -10px; left: -10px; margin: 5px 0 0 5px; border: 3px solid black; } .arrow:after { left: 100%; bottom: 0px; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 15px; border-bottom: 30px solid #E01616; border-right: 30px solid transparent; } .arrow:before{ border-bottom: 40px solid #000; border-right: 37px solid transparent; border-width: 0 37px 40px 0; bottom: 0; content: ""; left: 100%; position: absolute; top: 55px; } </style> </head> <body> <div class="slide"> <div class="arrow"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p> </div> </div> </body> </html>