HTML CSS examples for CSS Widget:Arrow
Creating bottom border arrow with clip path
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .demo {<!--from w w w . j a v a2 s .c om--> height: 20vh; position: relative; } .demo::after { content:''; display: block; position: absolute; top: 100%; left: 0; right: 0; height: 1em; background-color: #000; -webkit-clip-path: polygon(0 0, 45% 0, 50% 50%, 55% 0, 100% 0, 100% 30%, 55% 30%, 50% 80%, 45% 30%, 0% 30%) } </style> </head> <body> <div class="demo"> 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>