CSS Arrows

HTML & CSS
1

Hi, i can’t seem to wrap my head around css arrows.

JSFiddle:

Up and down arrows are good but i can’t seem to get the left and right arrows properly displayed like up and down. What am i doing wrong here?

CSS

#normal, #down, #up, #left, #right {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    background-color: green;
}

#down::after {
    content:"";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: red;
}
#normal {
    border: 6px solid transparent;
    border-top-color: red;
}
#up::after {
    content:"";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: red;
}
#left::after {
    content:"";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: red;
}
#right::after {
    content:"";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: red;
}

HTML

<div id="down"></div> <!-- down arrow -->

<div id="normal"></div> <!-- normal - why is this not square -->

<div id="up"></div> <!-- up arrow -->

<div id="left"></div> <!-- left arrow -->

<div id="right"></div> <!-- right arrow -->

Thanks

2

You need to set font-size:0; on those elements. Otherwise you get the height of the font added in there. Which is stretching the left/right…

3

Hi, tahirjadoon.

If I understand the intent correctly, then you need to set the generated boxes to {display:block;}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1218971-CSS-Arrows
2014.07.25 05:02
tahirjadoon
-->
    <style type="text/css">

[color=blue]/* consider using the box-sizing property.  Enable it, and see how the border of the "normal" box changes. */[/color]
/*
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*/
#normal, #down, #up, #left, #right {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    background-color: green;
}
#normal {
    border: 6px solid blue;
    border-top-color: red;
}
#down::after {
    content:"";
    [color=blue]display:block;  /* ADD Me */[/color]
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-top-color: red;
}
#up::after {
    content:"";
    [color=blue]display:block;  /* ADD Me */[/color]
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-bottom-color: red;
}
#left::after {
    content:"";
    [color=blue]display:block;  /* ADD Me */[/color]
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-right-color: red;
}
#right::after {
    content:"";
    [color=blue]display:block;  /* ADD Me */[/color]
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-left-color: red;
}


    </style>
</head>
<body>

<div id="normal"></div> <!-- normal - why is this not square -->
<div id="down"></div> <!-- down arrow -->
<div id="up"></div> <!-- up arrow -->
<div id="left"></div> <!-- left arrow - not setting properly-->
<div id="right"></div> <!-- right arrow - not setting properly -->

</body>
</html>
4

Thanks guys!
I have updated the jsfiddle as well with updated css rules.

5

I do not see any changes in the JSFiddle code.

Just to be sure you understand what I posted, just copy that code to a new file, give it a name that ends with .htm or .html and double click it to open it in your browser. I coded the boxes blue instead of transparent so the shapes would be obvious.

You can also try the box-sizing property and see if that appeals to you.

Cheers.

6

This time jsfiddle gave me this link to share:

I have tested your code as well. I think now i know what is going on here.

7

Interesting. In the first post, you asked why the box was not square. In the latest JSFiddle, you have added 10px of padding-right to all boxes so they are certainly not square.

{font-size:0} is not necessary. It is one of several techniques used to eliminate space between inline-block objects such as inline list items, but there is nothing for the font-size to affect these boxes, so it is not necessary.

Here’s another version to play with ‘just for fun’. :slight_smile: :stir:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easy CSS Triangle "Arrows"</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1218971-CSS-Arrows
2014.07.25 05:02
tahirjadoon
-->
    <style type="text/css">

/* consider using the box-sizing property.  Enable it, and see how the "normal" box changes. */
/*
*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
*/

#normal, #down, #up, #left, #right {
    width: 50px;
    height: 50px;
    background-color: green;
    position:relative;
    padding:6px;
/*    margin-bottom: 20px; */
    margin:20px;
}
#normal {
    border: 6px solid blue;
    border-top-color: red;
    padding:0;
}
#down::after {
    content:"";
    display:block;  /* ADD Me */
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-top-color: red;
    position:absolute;
    top:100%;
    right:0;
}
#up::after {
    content:"";
    display:block;  /* ADD Me */
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-bottom-color: red;
    position:absolute;
    bottom:100%;
    left:0;
}
#left::after {
    content:"";
    display:block;  /* ADD Me */
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-right-color: red;
    position:absolute;
    bottom:0;
    right:100%;
}
#right::after {
    content:"";
    display:block;  /* ADD Me */
    width: 0;
    height: 0;
    border: 6px solid blue;
    border-left-color: red;
    position:absolute;
    top:0;
    left:100%;
}
    </style>
</head>
<body>

<div id="normal"></div> <!-- normal - why is this not square -->
<div id="up"></div> <!-- up arrow -->
<div id="down"></div> <!-- down arrow -->
<div id="left"></div> <!-- left arrow - not setting properly-->
<div id="right"></div> <!-- right arrow - not setting properly -->

</body>
</html>