[CSS] Easy way to make an arrow

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
This tutorial relates to making arrows on elements such as comment boxes or error/alert messages, so if you're not here for that, I suggest you Google for it, I'm not coding actual arrows.

Many people use a hacky solution of messing with borders to make arrows but I find that too complicated and it takes too long, the method I'm about to use is hacky but much simpler.

PHP:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
       
        <style>
            [type="text"] {
                padding: 8px 12px;
            }
           
            .error{
                font: .75em Arial, sans-serif;
                padding: 8px 12px;
                background-color: #ce5e5e;
                border-radius: 4px;
                color: #fff;
                float: left;
                position: absolute;
                z-index: 4;
                box-shadow: 0 0 8px 1px black;
            }
           
                .error:after {
                    display: block;
                    content: "";
                    width: 16px;
                    height: 16px;
                    background-color: #ce5e5e;
                    position: absolute;
                    top: -8px;
                    left: 15px;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                }
        </style>
    </head>
   
    <body>
        <input type="text" placeholder="Enter your name">
        <div class="error">You cannot leave your name blank</div>
    </body>
</html>

The above code gives the following output:

KzLGg85.png


How does this work?
The effect is achieved in the :after pseudo element. It 'creates' a new element, in this case we created a 16x16px box matching the background colour of the alert, the we rotate the box on a 45 degree axis to give it the effect of an arrow.

Hope this helps if you use it...
 

GarettM

Posting Freak
Aug 5, 2010
833
136
The other way involves making the left and right border side transparent while making the center the same color or something close to that correct?

This seems so much easier!!! Thnx
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
The other way involves making the left and right border side transparent while making the center the same color or something close to that correct?

This seems so much easier!!! Thnx
Correct but using pseudo allows you eliminate the need for a whole element just for a triangle shape.

You can also use :before as well but since I'm on mobile I won't write the code - same principle though.

Nice share, Mark.
 

brsy

nah mang
May 12, 2011
1,530
272
Maybe add the box-shadow too the arrow, too :)
Thanks anyways, never thought of using this way.
A box shadow might not work with this technique because the arrow is actually a box, so the whole box would get the shadow, not just the visible end of the square.
 

GarettM

Posting Freak
Aug 5, 2010
833
136
A box shadow might not work with this technique because the arrow is actually a box, so the whole box would get the shadow, not just the visible end of the square.
i believe you can do box shadow up or down ( bottom or top of a box ) so if the arrow is up or down maybe it would work?
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
i believe you can do box shadow up or down ( bottom or top of a box ) so if the arrow is up or down maybe it would work?
Yeah, it is possible to achieve a box-shadow on arrows, although it is a bit more difficult than simply adding a box-shadow.

The clue is in the name, it is a BOX shadow, therefor it'll generate a shadow in a box shape. However, you can get around this by using the CSS3 transform. I'll give a demo below:
Code:
transform-origin: 0 0;
transform: rotate(-45deg);
As well as this you will have to play around with your integers for your box-shadow that you have applied.
 

Users who are viewing this thread

Top