0

I'm having a lot of trouble trying to build this multistep form with tabs. Here's the design so you can have an idea what I'm trying to do:

image

What is giving me a really hard time is the arrow kinda thing at the end of each tab; I was trying to do this using css borders to draw the triangles, but can't find a way to make it look similar to the design. Do I really need to use background images to do this? Any help will be really appreciated.

<ul>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
</ul>
Lowtrux
  • 156
  • 2
  • 12
  • 41

1 Answers1

0

You just have to use the border technique you're talking about, on 2 nested divs. The outer div will be the color of the triangle border (blue), and the inner one will be grey. Just make the grey one a bit small and position it properly, and you're set.

That's how Twitter did it in a previous iteration of their design when they had an arrow above the tweet replies.

Robin
  • 21,667
  • 10
  • 62
  • 85
  • Many thanks @robin. Do i have to add the two divs inside the
  • 's ? i just updated my post with the html structure for the tabs. It's kinda confusing also how do i position everything in order to make them look overlap.
    • – Lowtrux Apr 14 '14 at 18:57
  • Position the inner arrow with `position: absolute; top: 1px; right: 1px;`. You can change the values obviously. To position the arrows within the li's, I would add some padding-left to li's (except the first one, that you can target with li:first-child), and then position the arrows with 'position: absolute; right: -Xpx', where X is the width of your arrows. – Robin Apr 14 '14 at 19:42
  • Many Thanks @Robin, after some research i found a way to get this just adding a div inside the li elements and draw the borders with pseudoelements, the thing is that it looks ok in chrome but not so cool in firefox, ie and others. I think is the size of the pseudoelement borders, something is not ok with the borders width or heights. Here's a link to a the html file http://wearehellyeah.com/test/nueva_tipologia_21.html – Lowtrux Apr 14 '14 at 21:05
  • Nice. You're right, it looks good in chrome, but very aliased in firefox. I don't know how to fix that tbh. – Robin Apr 14 '14 at 21:29