HTML CSS examples for CSS Widget:Arrow
Border with a transparent centred arrow using transform
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .line-separator {<!--from w w w . ja va 2s. com--> } .side-line { display: inline-block; border-top: 1px solid black; width: 20%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); transform-origin: center center; border-top: 1px solid black; border-left: 1px solid black; margin-left: -3px; margin-right: -3px; margin-bottom: -3px; } </style> </head> <body> <div class="line-separator"> <div class="side-line"> </div> <div class="triangle"> </div> <div class="side-line"> </div> </div> </body> </html>