Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS Arrows


  • Please log in to reply
5 replies to this topic

#1 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 11 September 2012 - 12:10 AM

CSS Arrow

Hey, this should be a fairly short tutorial about css arrows.
They key about css arrows are borders. AND borders in different colors.

Say you want a down-arrow, you'll be using border-top, border-left and border-right.
At first, this did not make sence to me at all. But I hope that after this tutorial it does a little bit for you.

Let's start by just making a div with a border, nothing special (inline-block to make the div not take the whole available width):
<html>
  <head>
    <style>
      #borders {
        border: 50px solid red;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="borders">XxXx<br/>xXxX<br/>XxXx</div>
  </body>
</html>
border1.png

Now, give left and right a different color so you see how a browser truly handles borders.
So change the style to:
#borders {
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid red;
  border-left: 50px solid blue;
  display: inline-block;
}
border2.png
Here's the thing: With a little bit of imagination, you can already see 4 "arrows" there. Red ones being an up- and down arrow.
Blue ones being the left- and right arrow.

Of course, they don't end in a point, but that's only because the <div> has content. So clear out the div:
<div id="borders"></div>
border3.png
You clearly see the arrows now. And I hope you see that the down-arrow we see is there because of the top, left, and right border.
Wether that bottom one is there, would not affect our down-arrow shape.
So you can try removing the border-bottom style.
border4.png
Basically we have our arrow there now. We just don't want the blue of the left and right border there.
Simple to fix, by setting their color to transparant.
#borders {
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  display: inline-block;
}
border5.png
So for our down arrow (gimp skills going trough the roof right there):
border6.png

If I think back of the example with different border colors and content in the div I always understand and see which borders I need.

I hope css arrows now make a bit more sence than the time you first copied it from the interwebz ;)

An example of the forum's own 'mark forum as read button':
border7.png
I've quickly used inline styles..
<div style="display: inline-block; width: 25px; height: 25px; background-color: #4F4F4F;
    border-radius: 5px; margin-left: 2px;">
<div style="border-left: 7px solid white; border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; margin-top: 6px; margin-left: 10px;">
</div>
</div>

  • 6

#2 James360Smith

James360Smith

    CC Newcomer

  • Member
  • PipPip
  • 20 posts
  • Programming Language:Objective-C, PHP, JavaScript, PL/SQL, Ada, Transact-SQL, Logo, ActionScript
  • Learning:Objective-C, PHP, JavaScript, Perl, Ruby, PL/SQL, Visual Basic .NET

Posted 17 December 2012 - 03:29 AM

Hi Win Dc,

Awesome tutorial with clear description with simple language which is easily understood by anyone easily. Happy to read it. Thumps up for this. Looking for more such great stuff from you.

  • 0

#3 gskirupa

gskirupa

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:C#, JavaScript, Transact-SQL
  • Learning:Objective-C, (Visual) Basic, Visual Basic .NET, VBScript

Posted 30 December 2012 - 11:21 PM

Great explanation!
  • 0

#4 chisao101

chisao101

    CC Lurker

  • New Member
  • Pip
  • 3 posts
  • Location:Raleigh, NC
  • Learning:PHP, JavaScript

Posted 16 February 2013 - 12:07 PM

That's awesome! Thanks for sharing this!


  • 0

#5 destineddesign

destineddesign

    CC Lurker

  • New Member
  • Pip
  • 5 posts
  • Location:california

Posted 18 September 2014 - 11:08 PM

For this example:

 

#borders {
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
display: inline-block;
}

 

Would like to ask me what is meaningful of attributes transparent


  • 0

#6 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 18 September 2014 - 11:10 PM

"transparent" is the color of the border. Which makes the border invisible.


  • 0