HTML CSS examples for CSS Widget:Arrow
Css custom border style with triangles and arrows
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrapper{<!--from w w w.j ava2 s .c o m--> width:500px; height:500px; position:relative; } .arrow_box { position: absolute; background: pink; border: 4px solid blue; height:100px; width:40px; top:50px; left:50px; } .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: blue; border-width: 20px; margin-left: -20px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 26px; margin-left: -26px; } .arrow_box_2 { position: absolute; background: #88b7d5; border: 4px solid #c2e1f5; border-left:none; height:100px; width:50px; top:-4px; left:30px; } .arrow_box_2:after, .arrow_box_2:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box_2:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 20px; margin-left: -20px; } .arrow_box_2:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 26px; margin-left: -26px; } .arrow_box_3 { position: absolute; background: #88b7d5; border: 4px solid #c2e1f5; border-left:none; height:100px; width:45px; top:-4px; left:45px; } .arrow_box_3:after, .arrow_box_3:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box_3:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 20px; margin-left: -20px; } .arrow_box_3:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 26px; margin-left: -26px; } </style> </head> <body> <div class="wrapper"> <div class="arrow_box"> <div> <div class="arrow_box_2"> <div> <div class="arrow_box_3"> <div> </div> </div> </div> </div> </div> </div> </div> </body> </html>