HTML CSS examples for CSS Widget:Arrow
Make arrows on both sides of a box using css
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #arrowbox<!-- www. j a v a 2 s .c om--> { width: 200px; height: 50px; background-color:green; margin-left:100px; margin-top:100px; position: relative; } #arrowbox:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 128, 0, 0); border-left-color: blue; border-width: 25px; margin-top: -25px; } #arrowbox:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 128, 0, 0); border-right-color: blue; border-width: 25px; margin-top: -25px; } </style> </head> <body> <div id="arrowbox"></div> </body> </html>