HomeОбразованиеRelated VideosMore From: Arjun Khara

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

765 ratings | 29956 views
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.
Html code for embedding videos on your blog
Text Comments (59)
Akaganime Max (22 days ago)
I like it. thanks
bijay singh (28 days ago)
A very well explained video.... now I'll always remember this concept. Thanks a lot for making this amazing video Arjun
Arjun Khara (28 days ago)
Cheers for the kind comment, and I'm very glad you liked the tutorial. Will post more soon.
Mohd Aamir (1 month ago)
Awesome! I was looking for a responsive arrow... Thanks Arjun..
With Love Shimin (3 months ago)
Why there is a -25% margin-left?
Ravishankar Paranthaman (4 months ago)
AdiL IsmaiL (5 months ago)
Where did you lear front end development please tell me. Iam a self teaching developer
AdiL IsmaiL (5 months ago)
Where did you lear front end development please tell me. Iam a self teaching developer
Z. Monroé (1 month ago)
+AdiL IsmaiL freeCodeCamp!
Arjun Khara (5 months ago)
Check out the HTML5 and CSS3 starter tracks on codecademy; I like the way the tutorials are paced and they’re free for the most part. For a more comprehensive insight W3 Schools is good (https://www.w3schools.com/Css/) as well as Mozilla Open Source Tutorials. These should get you on a solid footing for building out your web-dev skills.
AdiL IsmaiL (5 months ago)
Can you suggest Some good websites for learning css
Arjun Khara (5 months ago)
Hey mate, I too have picked up through self-learning and basically experimenting with code. If there’s one thing that helped me learn quickly it’s to focus on an end-result (like a flip card or accordion box) and code towards that result. Learning coding for the sake of coding itself is like learning a language for the sake of letters and punctuation, rather than for writing a book or having a conversation. Check out websites you like, pick a feature that catches your attention, then try to rebuild it. Don’t worry too much about efficiency in the beginning. Just build the product. Then rebuild it again with fewer and fewer lines till you reach that point where your code is pure. I’ve found this method works well - for me at least - and there’s something in the end to show for it. All the best :)
Ray (5 months ago)
Great tutorial, btw what's the background music?
Ray (5 months ago)
Arjun Khara Thank you
Arjun Khara (5 months ago)
Ray: Thanks, the background music comprises two tracks - Pas De Deux and End of Summer. Both are available from YouTube Creator Studio :)
Lia Sue Kim (6 months ago)
Man you are really amazing.First time seing someone explaining something so easily and with calm voice.Great job man.I wish you had more tutorials on youtube. With you understanding and practicing css is just like learning abc.
Arjun Khara (6 months ago)
Lia Sue Kim - thanks very much, this was really nice to read; and yes, that really is my voice but I also use good production equipment for these videos ;)
raja lakshmi (6 months ago)
Love Google (7 months ago)
I like when people write html this way. Just a simple div instead of making more classes than you need to , mainly because makes css easier
Olan Sean (10 months ago)
Visakh PR (11 months ago)
Its been a great learning experience from your tutorials, thanks
jawhar omer yaba (1 year ago)
westfield90 (1 year ago)
Just two questions. What is the difference in using a single colon vs a double colon in the before or after code. Next can you do a video on something like a corner ribbon which uses like transparent command ?
Gary Richter (5 months ago)
westfield90 before and after are pseudo selectors. The old way to use them was with a single colon (just like :hover or similar). The new/modern standard is to use double colon to distinguish them as different (so it’s still :hover but you should use ::before). But a single colon will still work for before and after to prevent breaking old code. Double colon is just the new standard.
westfield90 (1 year ago)
Sorry I wasn’t clear. Something like this http://jsfiddle.net/davidcondrey/hrpc418m/ . I know the code is shown here but it would be great to have you explain the steps as clearly as you
Arjun Khara (1 year ago)
Hello. The fundamental difference is a single colon is the syntax used in CSS2. The double colon is syntax for CSS3. Typically both should work in modern browsers that support older versions of CSS though it's still a hit and miss situation in IE8 (although in my experience double colons have worked fine so far). Hope this helps. I'm happy to do a tutorial but I'm not sure what exactly you'd like to cover about transparency and ribbons. Could you give me more details please or perhaps a link to a reference? Cheers.
Ahmed Farag (1 year ago)
It is amazing video pro if it isn't the best ever I have seen, simple but perfect approach you deserve more likes and subscribers just keep making videos
Mohamed Talidi (1 year ago)
Let me click Subscribe Man; Thank You brother
Deepak Kumar Mohanty (1 year ago)
Its been a great learning experience from your tutorials. Keep uploading new videos.. thanks again
Arjun Khara (1 year ago)
Thank you mate; really glad to read this :)
İsmayıl Mirzəyev (1 year ago)
can we make that not triangle but circle and use as a button? like when you click, it scrolls down?
İsmayıl Mirzəyev (1 year ago)
thank you, sir
Arjun Khara (1 year ago)
Iska Minall - hi Iska, yes you certainly can, though in the case of a circular button it's much simpler to create a circular div and give it its relevant 'a href' properties. Then position the circular div to the bottom of the rectangular div using relative / absolute positioning for the rectangle and circle, respectively.
Anurag Gupta (1 year ago)
Gr8 ! Crisp. www.kickassdigitalmarketing.com
Noah Halstead (1 year ago)
What if you just set the background color to transparent instead of changing to match the background..??
Arjun Khara (1 year ago)
Noah Halstead Hi Noah. Indeed you could set transparency in a situation without the arrows, which is the simplest solution. But with the addition of arrows there is a fill within which requires extra lines of code to remove. So it's easier, from this perspective, to simply fill the main box with a color that matches the background.
Peter Bou Saada (1 year ago)
why use border-* ?? just use border: 2px solid #ffffff; im pretty sure u know that though
Hello Mihai (1 year ago)
In my copy of this tutorial the text was covered by the rotated square (arrow). Thus i sse a css triangle instead to make the arrow. After playing with the z-index property i was able to fix and make this work as well.
Arjun Khara (1 year ago)
Hello Mihai no worries :)
Hello Mihai (1 year ago)
Thanks Arjun. I checked and I did fix it. I updated my comment.
Arjun Khara (1 year ago)
Hello Mihai - this method works fine. Follow the steps in the tutorial to set padding and z-index values to prevent content overlap (let me know if you're unsure and I'll show you how to). This is a stable solution.
panayot panayotov (1 year ago)
Is this possible with a picture?
panayot panayotov (1 year ago)
Thank you!
Arjun Khara (1 year ago)
Not directly with this effect. Check out CSS Polygons for more advanced shape-building and filling. But do take note: as of this writing, CSS polygons are only fully supported on Chrome.
Glory Fk (2 years ago)
whaooo im studying in college and have to make my first live website and submit it on November 1st and have to say your videos are really advanced and cool and i will definitely be using this in it !!! THANKS A LOT DUDE !!!!!!!
Jasmine Little (1 year ago)
I'm also in college, getting top grades and hoping to learn enough from watching Youtube videos like this in my spare time so I can actually have the skills needed to find work when I graduate. So thankful for people like this who share their skills with others.
Peter Bou Saada (1 year ago)
ur in college and call this advanced ?
Adn Hans (2 years ago)
Excellent!! It is very useful!!!
Arjun Khara (2 years ago)
Glad you liked it, mate.
Thomas Williams (2 years ago)
Does this work on all browsers? Also I tried to put arrow on top using bottom:100% but it woudn't align probably even with changing the negative margin. LOL out worked out the margin. To put it on top you have to use margin-bottom: -25px instead heh heh
Thomas Williams (2 years ago)
Thanks and I have now got a border around my triangle thanks to your other tutorial
Arjun Khara (2 years ago)
Hi Thomas — yes, so far as I've tested, this works on all modern browsers. I've replied to your comment on how to create a border around the entire box and arrow, in the other video.
Zakaria Badri (2 years ago)
Excellent :) We wait for more videos ;)
Arjun Khara (2 years ago)
Thanks ;) Will upload more soon.
Arjun Khara (2 years ago)
This video is a follow-up companion tutorial to an earlier one on how to create div boxes with arrows. Here's the code snippet for this tutorial. Click on 'Read More' to expand. Enjoy! <style> body{ background: #de302f; } .container{ position: relative; max-width: 600px; height: auto; border: 2px solid #ffffff; margin: 100px auto; padding: 30px; box-sizing: border-box; } .container:after{ position: absolute; width: 50px; height: 50px; border-top: 0px solid #ffffff; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; border-left: 0px solid #ffffff; top:100%; left: 50%; margin-left: -25px; content: ''; transform: rotate(45deg); margin-top: -25px; background: #de302f; } </style> </head> <body> <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </body>
Victor-Marius Pîrvan (2 months ago)
+Kiran Dhakshinamoorthy Hi! You can try a higher transition durations inside the hover rule, perhaps like this: label:hover > div.dropdown { transition-duration: 0.5s;//or more } Anyway, you have to play with transition-duration or transition-delay.
Kiran Dhakshinamoorthy (4 months ago)
Awesome video. Thanks. However, the issue I'm facing is, I use this has a dropdown and on hover of the label I'm displaying this. Due to the margin gap between the label and this div, before I enter this div. It's disappears. Any solution for this? I know this is not stack overflow however I found you video so informative. So I'm asking you
Arjun Khara 👌👌👌
Glory Fk (2 years ago)
thank you!!! you are the best

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.