Creating a down arrow indicator in CSS (no images)

HTML & CSS
1

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:

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

Hi, Scott,

Something like this might work:


.apex-dn {
    width:0px;
    height:0px;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:12px solid #fff;
}



<div class="apex-dn"></div>
3

You could also avoid an extra element in the markup by placing that same code on a pseudo element:

<!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

You mean what I would call a “notch”?

That is the background image for the hgroup

<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-nubbin-noshadow-2995ec8e9cfc5e4d18d190aff385ea24.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

That works! Thanks Ronpat and Ralph. I learned something today!

6

You and me both :slight_smile:
By the time I got got done checking things out and making the post, they had already solved it!

7

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):

<!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

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

Yes, it’s well supported now and is incredibly cool for various styling purposes.

10

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.


<!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

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…


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

It’s all done with mirrors :slight_smile:

13

Thanks guys. I was able to apply this technique to my post titles and [URL=“http://learn.clickbump.com/clickbump-modern-skin-install/”]comments. Great solution and no extra http requests.