HTML/CSS - 表头 (thead) 中的三 Angular 形 Angular

Question

我正在尝试创建一个带有三 Angular 形 Angular 的 table 头。正是我想要得到这个结果:

我创建了类似的东西:

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;
}

但结果并不好:

是否有可能在不使用图片和 javascript(仅使用 CSS)的情况下获得此结果？？

谢谢。

编辑；

这是工作示例:https://jsfiddle.net/5o5qybk8/

Answer 1

你可以只使用渐变:

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

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