SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a down arrow indicator in CSS (no images)

    I'm looking for ideas on how to create the neat little down pointer that can be seen just under the header on the mashable blog:

    http://mashable.com/2014/01/24/grammys-2014-live-blog/

    On this page, its just below the word "Entertainment" and points down to the "2014 Grammy's" text.

    They are using an image for this. I'd like to do it with CSS only. Looking for ideas on how it can be done in pure CSS.

    Thanks in advance for any ideas you have.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Hi, Scott,

    Something like this might work:
    Code:
    .apex-dn {
        width:0px;
        height:0px;
        border-left:12px solid transparent;
        border-right:12px solid transparent;
        border-top:12px solid #fff;
    }
    Code:
    <div class="apex-dn"></div>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You could also avoid an extra element in the markup by placing that same code on a pseudo element:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    body {background: #30353b;}
    div {width: 400px; height: 200px; background: white; position: relative;}
    div:after {
        content: "";
        width:0px;
        height:0px;
        border-left:12px solid transparent;
        border-right:12px solid transparent;
        border-top:12px solid #fff;
        position:absolute;
        bottom:-12px; 
        left: 50%;
        margin-left: -12px;
    }
    
    </style>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,481
    Mentioned
    164 Post(s)
    Tagged
    1 Thread(s)
    You mean what I would call a "notch"?
    mashable.png
    That is the background image for the hgroup
    HTML Code:
    <hgroup class="page-header channel" data-channel="entertainment" data-section="sec0=entertainment&amp;sec1=index&amp;sec2=" id="post-head">
    <h2>Entertainment</h2><div class="follow-channel">
    ......
    </hgroup>
    using http://rack.0.mshcdn.com/assets/drop...aff385ea24.png

    If CSS alone can replicate that it's beyond my skill level. I guess it might be possible, but any reason why you don't want to use an image?

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works! Thanks Ronpat and Ralph. I learned something today!

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,481
    Mentioned
    164 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    That works! Thanks Ronpat and Ralph. I learned something today!
    You and me both
    By the time I got got done checking things out and making the post, they had already solved it!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    That works! Thanks Ronpat and Ralph. I learned something today!
    Hehe, cool. Another way to do it these days is to use CSS transforms to rotate a small square (but it's not as well supported yet):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    body {background: #30353b;}
    div {width: 400px; height: 200px; background: white; position: relative;}
    div:after {
        content: "";
        width:24px;
        height:24px;
        background: white;
    	-ms-transform:rotate(45deg); /* IE 9 */
    	-webkit-transform:rotate(45deg); /* Safari and Chrome */
    	transform:rotate(45deg);
        position:absolute;
        bottom:-12px; 
        left: 50%;
        margin-left: -12px;
    }
    
    </style>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,481
    Mentioned
    164 Post(s)
    Tagged
    1 Thread(s)
    I'm happy with the pseudo, last time I toyed with it was years ago and it wasn't very well supported.
    I remember seeing it and saying "that would be cool" then after several attempts saying "huh, it doesn't do anything"

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I'm happy with the pseudo, last time I toyed with it was years ago and it wasn't very well supported."
    Yes, it's well supported now and is incredibly cool for various styling purposes.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    If you need to follow a border around the arrow then you can utilise the :before pseudo element as well to create a border around the arrow.

    e.g.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    body { background: #30353b; }
    div {
    	width: 400px;
    	height: 200px;
    	background: white;
    	position: relative;
    	border:1px solid red
    }
    div:after, div:before {
    	content: "";
    	width:0px;
    	height:0px;
    	border-left:12px solid transparent;
    	border-right:12px solid transparent;
    	border-top:12px solid #fff;
    	position:absolute;
    	bottom:-12px;
    	left: 50%;
    	margin-left: -12px;
    	z-index:2;
    }
    div:before {
    	z-index:1;
    	border-top:12px solid red;
    	bottom:-13px;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you need to follow a border around the arrow then you can utilise the :before pseudo element as well to create a border around the arrow.
    That is slick, Mr. Paul. I never thought that was possible.

    For my copy of your demo, I made a couple of tweaks so the red outline would be more obvious around the triangle...

    Code:
    body { background: #eee; }
    div {
    	border-radius:16px;
    }
    div:after, div:before {
    	border-left:12px dotted transparent;
    	border-right:12px dotted transparent;
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ronpat View Post
    That is slick, Mr. Paul. I never thought that was possible.
    It's all done with mirrors

  13. #13
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I was able to apply this technique to my post titles and comments. Great solution and no extra http requests.

    arrow2.jpg

    arrow1.jpg


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •