HTML CSS examples for CSS Widget:Arrow
Left arrow with CSS only
<html> <head> <title>JumboArrow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .jumbo {<!--from w w w .j a va2 s .co m--> position: relative; display: inline-block; border-bottom: 1px dotted blue; } .jumbo .arrow { width: 180px; background-color: black; color: #fff; text-align: center; padding: 11px 0; position: absolute; z-index: 1; left: 110%; } .arrow::after { content: ""; position: absolute; top: 20%; right: 100%; margin-top: -8px; border-width: 21px; border-style: solid; border-color: transparent black transparent transparent; } </style> </head> <body style="text-align:center"> <div class="jumbo"> <span class="arrow">test</span> </div> </body> </html>