I'm trying to achieve something similar to how Apple does their breadcrumbs in the footer:
I was thinking CSS3 (border-radius), but that does rounded corners only. Or is is a simple HTML5 feature?
I'm trying to achieve something similar to how Apple does their breadcrumbs in the footer:
I was thinking CSS3 (border-radius), but that does rounded corners only. Or is is a simple HTML5 feature?
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.
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;
}
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
border-radius
for the triangle effect..
May 13, 2013 at 1:12
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
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.