HTML CSS examples for CSS Widget:Arrow
Create arrow with :after
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> aside {<!--from ww w . j av a2 s.c o m--> background-color: lightgray; height: 5em; margin-top: 5em; position: relative; width: 10em; } aside::after { content: ""; border-bottom: .8em solid lightgray; border-left: .5em solid transparent; border-right: .5em solid transparent; position: absolute; top: -.6em; left: 10%; margin-left: -.2em; } </style> </head> <body> <aside></aside> </body> </html>