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

how can 1 create button on website each side being oblique (diagonals)?

i didn't find example show closest find in 10 minutes:

http://cfl.ca/ (see menu tabs: news, video, schedule, standings)

however, in case, need sort of design independant button , not menu tab.

here's 1 (imperfect) way of doing it, though it's little mark-up heavy:

<div class="button">     <span></span>     button text     <span></span> </div> 

with 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 text-is aligned bottom of .button element, seems starting point, @ least. (and edits, or comments, left explain/improve answer welcome desk...).

---

edited revise demo css:

.button {     width: auto;     display: inline-block;     background-color: #f00;     height: 2em;     line-height: 2em; /* centering 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 'normal flow' */     margin-top: -2em; /* aligns vertically top of parent .button div */ } 

revised js fiddle demo.

---

edited in response adam's (op's) question (in comments):

...i'm trying understand how did it.

the idea based around simple premise join between borders 45°, illustrated 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 result:

js fiddle demo.

that being case if 2 adjoining borders coloured same 2 right-angled triangles created (using same html 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 example above defined height of containing element (.box) 2em, , borders of contained span elements 1em (making overall height 2em, had given spans own height (or width) shape 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 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 useful pseudo-3d frame effects, perhaps; particularly :hover effects/changes.

i'm not sure if that's helped, much, if have specific curiosities let me know in comments, , i'll best answer them. =)

edited add pseudo-element, ::before/::after, solution.

the html simplified to:

<div class="button">     button text </div> <div class="button">     more button text </div> <div class="button">     , yet more button text </div>​ 

but css rather more verbose, not complex, there seems 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.