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

preview_player
Показать описание
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.
  1. Arjun Khara
  2. css
  3. arrows
  4. outline
  5. transparent
  6. html
Рекомендации по теме
Create Outlined Div 0:04:55

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

Create Outlined Div 0:06:55

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

how to create 0:03:57

how to create Outlined Div Boxes with Arrows using html and css

Outlined Div Box 0:00:40

Outlined Div Box with Arrows using HTML, CSS

How to Create 0:05:36

How to Create Outlined Div boxes, Arow and Pointers Using html and css

Create Outlined Div 0:04:01

Create Outlined Div Boxes HTML CSS

How to Put 0:02:01

How to Put a Border Around an Entire Div Box and its Pointer, Using CSS

How to display 0:00:39

How to display divs side by side CSS

How to create 0:10:54

How to create arrow div using CSS

create a transparent 0:08:45

create a transparent div box using css | responsive container tutorial | web zone

Outlined Div Box 0:04:51

Outlined Div Box with Arrows using HTML & CSS | UI Design

Create Box With 0:03:32

Create Box With Arrow and Pointer using html and css

Create Slanted or 0:05:46

Create Slanted or Razor-Blade Div Shapes with CSS3

Creating a website 0:04:08

Creating a website | S1E10 | box-sizing:border-box

CSS Skewed Background 0:03:40

CSS Skewed Background Tutorial - 2 - pure css tutorials

Recycle the coke 0:00:15

Recycle the coke bottle/ bottle craft idea 💡 #shorts #bottlecraft #shortsfeed

Animate On Scroll 0:02:51

Animate On Scroll With Just 3 LINES Of CSS (No Libraries Needed)

cement craft ideas 0:00:22

cement craft ideas | garden decoration #diy #garden #cement

CSS Triangle / 0:11:46

CSS Triangle / Outlined DIV Pointers using HTML and CSS

Excel IF function 0:00:20

Excel IF function trick ( In 20 seconds)| Pass/Fail #shorts #exceltricks

Diy Unique And 0:00:28

Diy Unique And Different Wall Hanging #shorts #craft #shivamart

This Kid Destroyed 0:00:12

This Kid Destroyed A Whole Team 😱 - Rugby #shorts

Div Box Image 0:04:33

Div Box Image Hover | Html, Css image card hover effect

How many hours 0:00:20

How many hours does it take to reach every rank in Rocket League?

Комментарии
Автор

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.

nirajregmi
Автор

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

durrhurr
Автор

some kind of magic you have done. thank you so much it solved my
6yars old video...why you stooped updating new content it'll help the community
thanks again.

MuhammadImran-sod
Автор

wow, 10 seconds in the video and i already know how to do it. Amazing!

abhinavsinghchauhan
Автор

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.

LiaSueKim
Автор

Super easy, I love how simple this is. Great video!

rebelmachine
Автор

The way you explain is beautiful yaar ...you are a coach by birth i guess 😇

hiphopKrantikari
Автор

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

ahmedfarag
Автор

Its been a great learning experience from your tutorials. Keep uploading new videos.. thanks again

deepakkumarmohanty
Автор

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

BLITZftw
Автор

am the person after watching this video, who likes your video, comment and a new subscriber
amazing sir appreciate

ImranAhmed-ypsj
Автор

Its been a great learning experience from your tutorials, thanks

visakhpr
Автор

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

bijay
Автор

Appreciate the help man! This was straightforward and awesome👍

alphabutbeta
Автор

Awesome! I was looking for a responsive arrow... Thanks Arjun..

hhh
Автор

Nice! saved me a lot of time plus the code is clean and simple!

qamarramzan
Автор

Really nice and cool tutorial straight to the point. thank you !!!

musadanjuma
Автор

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
margin: 100px auto;
padding: 30px;
box-sizing: border-box;

}

.container:after{
position: absolute;
width: 50px;
height: 50px;
border-top: 0px solid
border-right: 2px solid
border-bottom: 2px solid
border-left: 0px solid
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>

ArjunKhara
Автор

thank you it was really useful and easy to understand!

rasoulhosseini
Автор

this is beautiful way i like it sir keep it up

anakyouzogoloov