1

I'm trying to achieve something similar to how Apple does their breadcrumbs in the footer:

Breadcrumb example

I was thinking CSS3 (border-radius), but that does rounded corners only. Or is is a simple HTML5 feature?

2

3 Answers 3

1

You can indeed do it with CSS3 and pseudo-elements. The below uses a button and then creates two triangles, a lower black one to use as the border and then an upper gray one to use at the fill color.

jsFiddle

enter image description here

button {
    padding:0 1em;
    height:30px;
    border:1px solid #000;
    background-color:#DDD;
    position:relative;
}
button:before,
button:after {
    content:"";
    display:block;
    position:absolute;
    left:100%;
}
button:before {
    content:"";
    display:block;
    position:absolute;
    left:100%;
    top:0;
    bottom:0;
    margin-left:1px;
    border-left:6px solid #000;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
}
button:after {
    top:1px;
    border-left:6px solid #DDD;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    bottom:1px;
}
0

Theres is alot examples on the internet just look for css3 breadcrumbs and you will see many tutorials.

http://css-tricks.com/triangle-breadcrumbs/

And you can do that with border here is a example and a tutorial

http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation

2
  • I'm fairly sure your codeplayer tutorial linked does not use border-radius for the triangle effect.. May 13, 2013 at 1:12
  • Yes, so border-radius to make the square's corners less pointy, and pseudo element rotation for the triangle/6 point button/breadcrumb effect. That's not the same as using border-radius to create the triangle effect, which is what your answer insinuates, since the question asks if it is possible to create that effect with border-radius. The answer to that is no, and the "border-radius does only rounded corners" assumption in the question is very much correct, just pointing that out. May 13, 2013 at 1:28
0

It's not a simple HTML5 feature, as already pointed out in the comments to your question, Apple uses an image.

If you really want a CSS solution, you should have a look here: http://cssdeck.com/labs/one-tag-ios-like-buttons. It's an approach to creating iOS style buttons using only CSS, for use in iOS web apps. It uses a rotated :after pseudo element to create the desired effect.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.