Majkson Majkson - 5 months ago 11
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) ??

Thanks.

EDIT;

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

Answer

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/