HTML / CSS - 桌头（thead）中的三角形角

Question

我正在尝试创建一个带三角形角的桌面。我想得到这个结果：

我创造了类似的东西：

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）的情况下获得此结果？

感谢。

EDIT;

以下是工作示例：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/

Answer 2

另一种方法;

.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>

小提琴：https://jsfiddle.net/1gs539nz/

Answer 3

这是一种可能的方法，将一个倾斜的div放在一个常规div之上，然后对它们进行不同的着色。 如果您附加原始HTML，人们可以帮助您修复自己的代码，我想这对您更好。

.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>