A pop-out with an arrow using plain CSS and HTML only
Create a pop-out with arrow using plain css and html only JSFiddle Link: https://jsfiddle.net/vish6263/vwg06ecd/29/ There is something new to be learnt everyday in the web world. Having worked for so long in this domain, it made me happy to realize this yet again when I came across a requirement to implement a simple pop-up with an arrow. However, there were many caveats to it 1. It was not a solid arrow but one which should appear as an extension of pop-up and a single border around the pop-up and arrow. 2. The pop-out could be placed anywhere around the trigger(left, right, bottom or top) depending on the available space So here it goes 1. Create a rounded or straight rectangle or square as required for the pop-up 2. Create a small square and rotate it by -45Deg so that half of the square across the diagonal appears as a triangle/arrow 3. Now comes the fun part, in order to make it appear as an extension of the pop-up, there needs to be a box shadow a...