Create Outlined Div Boxes (see-through) with Arrows and Pointers, Using CSS



Here’s how to create and style just the outline of a div box (see-through) complete with arrows / pointers. This technique uses only basic HTML and CSS. No JavaScript required. Code snippet for this effect is in the comments section below.

24 Comments

  1. Great content, thank you for that. But the combination of bad sound and background music is annoying imho.

  2. I now its from 2016 but all that code for the arrow cut just been done in 4 line off code that is really it.

  3. How to change the position of an arrow? Like in this video it is at bottom, what if I need arrow on right or left?

  4. i dont understand why this part doesnt work, please help me

    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet" type="text/css">
    <title>Trying to do something good</title>
    <style>
    <body{
    background: #de302f;
    font-family: 'Roboto' , sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    font-weight: 100;
    }

    </style>
    </head>

    <body>
    </body>
    </html>

  5. I really appreciate the way you explained the things in a very simple way with visual representation and break it down to make it easy to absorb. Really great tutorial.

  6. A very well explained video…. now I'll always remember this concept. Thanks a lot for making this amazing video Arjun

  7. Where did you lear front end development please tell me.
    Iam a self teaching developer

Leave a Reply

Your email address will not be published. Required fields are marked *