HTML/CSS - Triangle corners in table head (thead)

Question

I'm trying to create a table head with triangle corners. Exactly I would like to get this result:

I created something like that:

table .main_cat_left {
background-color: #57B3E3;
}

table .main_cat_center {
  border-left: 10px solid #57B3E3;
  border-top: 10px solid #FFC600;
  width: 0;
  height: 0;
}

table .main_cat_right {
background-color: #FFC600;
}

But the result isn't good:

Is it possible to get this result wihtout using picture images and javascript (just with CSS) ??

Thanks.

EDIT;

Here is working example: https://jsfiddle.net/5o5qybk8/

Answer 1

you may just use a gradient:

table .main_cat_center {
  background:linear-gradient(to bottom left, #FFC600 50%, #57B3E3 50%);
}

https://jsfiddle.net/5o5qybk8/1/ or https://jsfiddle.net/5o5qybk8/3/

Answer 2

Another approach;

 .yellowTriangle { width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 0; border-color: #cc9433 #336699 transparent transparent; } .blueTriangle { width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 0; border-color: #336699 #cc9433 transparent transparent; } 

 <table> <tr> <td class="yellowTriangle"> First </td> <td class="blueTriangle"> Second </td> </tr> </table> 

Fiddle: https://jsfiddle.net/1gs539nz/

Answer 3

Here's a possible way of doing it, putting a skewed div on top of a regular div and coloring them differently. If you attach your original HTML people can help you fix your own code, I suppose it would be better for you.

 .navbar { position: fixed; top: 0; height: 100px; background: black; width: 100%; min-width: 50%; } .bottom { position: absolute; height: 50px; width: 100%; bottom: 0; } .nav-links { margin: 0 !important; display: block; margin: auto; } .top { position: absolute; height: 50px; width: 100%; top: 0; background: #FCC700; max-width: 100%; overflow: hidden; ; } .top-left { background: #272566; -ms-transform: skewX(30deg);/* IE 9 */ -webkit-transform: skewX(30deg);/* Safari */ transform: skewX(30deg);/* Standard syntax */ left: -20px; height: 50px; width: 60%; position: absolute; top: 0; z-index: 999; } .nav-links li { display: inline-block; color: white; margin: 3px 15px; } 

 <div class="navbar"> <div class="top"> <div class="top-left"></div> </div> <div class="bottom"> <ul class="nav-links"> <li>Waluta</li> <li>Kupno</li> <li>Kupno</li> <li>Kupno (HURT)</li> <li>Sprezedaz (HURT)</li> </ul> </div> </div>