Majkson Majkson - 3 months ago 7
HTML Question

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

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

enter image description here

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:

enter image description here

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



Here is working example:


you may just use a gradient:

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