HTML CSS examples for CSS Widget:Arrow
Box with Arrow top and Border
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .arrow-up {<!--from w w w . java2s. c om--> width: 0; height: 0; margin-top: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid gray; } #log2 { height: 250px; width: 250px; background: white; border: 1px groove rgba(0, 0, 0, .35); position: relative; display: block ; margin-top: 54px; float: left; left: 29.965%; z-index: 2; border-radius: 3.5px; } </style> </head> <body> <ul id="log2" style="display: inline;"> <span class="arrow-up" style="top: -10px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span> <br> this is a test <br> this is a test this is a test this is a test </ul> </body> </html>