Create list with triangles on the right side CSS

Question

Im trying to create a list like on the image, but I cant figure out how to do it. So far I've done this, but seems im not doing it right:

My work so far:

#side-menu li:nth-child(even) {
background: rgb(0,169,148);
background: -moz-linear-gradient(left, rgba(0,169,148,1) 1%, rgba(0,84,166,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,169,148,1)), color-stop(100%,rgba(0,84,166,1)));
background: -webkit-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);
background: -o-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);
background: -ms-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);
background: linear-gradient(to right, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a994', endColorstr='#0054a6',GradientType=1 );
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 10px solid rgba(0,84,166,1);
}

and current looks:

enter image description here

and how it should be:

enter image description here

cssarrowplease.com

Ravimallya
– Ravimallya

2013-12-24 09:53:14 +00:00
Commented Dec 24, 2013 at 9:53 — Ravimallya
– Ravimallya, Commented Dec 24, 2013 at 9:53
@Ravimallya i think this will be the answer

Darko Petkovski
– Darko Petkovski

2013-12-24 10:16:52 +00:00
Commented Dec 24, 2013 at 10:16 — Darko Petkovski
– Darko Petkovski, Commented Dec 24, 2013 at 10:16

Mario · Accepted Answer · 2013-12-24 11:14:07Z

There are multiple solutions for this problem. Since you started with CSS3 already, here's my approach using CSS only.

What's done here is essentially abusing the borders around an empty HTML element. By not setting the right border it's set to 0. The other borders are then adjusted to fit the borders, which happens to result in an arrow shape being created.

Due to this, modifying the size/shape of the arrow can be a bit tricky (there are multiple options; I prefer this for the current situation):

Set a line height for the <li> so it's easier to determine the correct arrow height.
To adjust the arrow size, you'll have to set li:after's width of both, border-top and border-bottom to 50% of the value line-height + padding-top + padding-bottom of the <li> element..
By adjusting border-left you're able to determine the length of the arrow.
Finally, margin-top of li + li will define the spacing between the arrows.

Since your image also suggests some hover color, that's possible as well as can be seen here. Although it's important to note that transitions won't work for gradients so far.

Of course, using a fixed image as the background would be even more backwards compatible with older browsers, but this also really depends

Ravimallya · Accepted Answer · 2013-12-24 12:00:36Z

4

You can use http://cssarrowplease.com/ website to create custom arrows in all directions. Change the height to whatever you needed. You can then tweak the styles to get exactly what you needed.

answered Dec 24, 2013 at 12:00

Ravimallya

6,6202 gold badges44 silver badges76 bronze badges

Comments

ashley · Accepted Answer · 2013-12-24 10:05:40Z

3

Here's one way of doing it:

Fiddle: http://jsfiddle.net/SM2NR/

#side-menu li:after {
    content: "";
    position: absolute;
    right: -20px;
    top: -13px;
    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-left: 20px solid #0054A6;
    border-bottom: 22px solid transparent;
}

answered Dec 24, 2013 at 10:05

ashley

2,7675 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

Create list with triangles on the right side CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related