shapes with the :after tag [duplicate]

Question

This question already has an answer here:

Adding an arrow on both sides of a div using CSS? [closed] (1 answer)

Closed 7 years ago.

I am wondering if it is possible to make shapes with no html code, only with css.

Example: I have a menu : html

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

For each menu item I want to add a triangle at the end of it without adding other html tags to the code and align them with the text.

Is this possible with the CSS selector :after ?

Answer 1

To get the triangle aligned with the text and with the :after selector this is the solution.

(João Mosmann put me on the right path with this answer)

HTML :

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

CSS

li{
    position:relative;
}
li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
    position:absolute;
    top:5px;
    margin-left:10px;
}

Check the FIDDLE

Answer 2

Yes, you can.

Check here a example.

http://jsfiddle.net/m4fkW/

HTML

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

CSS

li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
}

Answer 3

Use the following code:

ul li:after{url('Traingle url goes here')}

Answer 4

This is possible with pure CSS.

Please look at this link for a full list of shapes.

But the triangles are here:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

and more on the website.

Answer 5

li:after { content: url(img.jpg); }