CSS/Web design: how to create an oblique/sided button - css

Question

How can one create a button on a website with each side being oblique (diagonals)?
I didn't find an example to show you but this is the closest I could find in 10 minutes:
http://cfl.ca/ (see the menu with tabs: News, Video, Schedule, Standings)
However, in my case, I need that sort of design for an independant button and not for a menu tab.

Answer 1

Here's one (imperfect) way of doing it, though it's a little mark-up heavy:
<div class="button">
<span></span>
Some button text
<span></span>
</div>
With the CSS:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
overflow: hidden;
}
.button span:first-child {
display: inline-block;
border-top: 1em solid #fff;
border-left: 1em solid #fff;
border-bottom: 1em solid #f00;
border-right: 1em solid #f00;
float: left;
margin-right: 1em;
}
.button span:last-child {
display: inline-block;
border-bottom: 1em solid #fff;
border-right: 1em solid #fff;
border-top: 1em solid #f00;
border-left: 1em solid #f00;
margin-left: 1em;
}
.button:hover {
background-color: #0f0;
}
.button:hover span:first-child {
border-right-color: #0f0;
border-bottom-color: #0f0;
}
.button:hover span:last-child {
border-left-color: #0f0;
border-top-color: #0f0;
}
JS Fiddle demo.
I'm not yet sure why the text-is aligned to the bottom of the .button element, but it seems to be a starting point, at least. (And any edits, or comments, left that explain/improve the answer will be welcome as soon as I get back to my desk...).
Edited to revise the demo CSS:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
line-height: 2em; /* centering the text vertically */
}
/* other stuff */
.button span:last-child {
display: inline-block;
border-bottom: 1em solid #fff;
border-right: 1em solid #fff;
border-top: 1em solid #f00;
border-left: 1em solid #f00;
margin-left: 1em;
float: right; /* removes from the 'normal flow' */
margin-top: -2em; /* aligns vertically with the top of the parent .button div */
}
Revised JS Fiddle demo.
Edited in response to Adam's (OP's) question (in comments):
...I'm trying to understand how you did it.
The idea is based around the simple premise that the join between borders is 45°, as illustrated with the following HTML/CSS:
<span id="box"></span>
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: blue;
}
With the result:
JS Fiddle demo.
That being the case if two adjoining borders are coloured the same two right-angled triangles are created (using the same HTML as above):
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
}
Giving:
JS Fiddle demo.
In the example above I defined the height of the containing element (.box) as 2em, and the borders of the contained span elements as 1em (making the overall height 2em, had I given the spans their own height (or width) the shape would have become more intricate:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
height: 30px;
}
Giving (with height):
Or, using width:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
width: 30px;
}
Giving:
Using both width and height allows for a partially-dissected box:
#box {
display: inline-block;
border-width: 30px;
border-style: solid;
border-top-color: red;
border-right-color: red;
border-bottom-color: yellow;
border-left-color: yellow;
width: 30px;
height: 30px;
}
Giving:
This could be useful for pseudo-3D frame effects, perhaps; particularly with :hover effects/changes.
I'm not sure if that's helped, much, but if you have any specific curiosities let me know in the comments, and I'll do my best to answer them. =)
Edited to add a pseudo-element, ::before/::after, solution.
The HTML is simplified somewhat to:
<div class="button">
Some button text
</div>
<div class="button">
Some more button text
</div>
<div class="button">
And yet more button text
</div>​
But the CSS is rather more verbose, not complex, but certainly there seems to be more of it:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
line-height: 2em;
position: relative;
margin-left: 3em;
}
.button::before,
.button::after {
content: '';
border-color: #f00;
border-width: 1em;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
}
.button::before {
border-top-color: transparent;
border-left-color: transparent;
right: 100%;
}
.button::after {
border-right-color: transparent;
border-bottom-color: transparent;
left: 100%;
}
.button:hover {
background-color: #0f0;
}
.button:hover::before {
border-color: #0f0;
border-top-color: transparent;
border-left-color: transparent;
}
.button:hover::after {
border-color: #0f0;
border-right-color: transparent;
border-bottom-color: transparent;
}
​JS Fiddle demo.

Answer 2

Funnily enough thirtydot posted a link to a tutorial for this earlier today: http://www.joecritchley.com/demos/slanted-nav/
It's for a nav, but the principle should be the same.

Answer 3

You use oblique background images for each element, then overlap the elements to get the images to butt-up to each other visually. The only way to get around not having rectangle hit areas is to use an image map (which you probably don't want to use).

Answer 4

I know it's not the most "techie" answer ever but this site can generate that kind of css for you (and browser compatible if possible)