使用CSS创建对角线/截面/边框

您可以在没有任何剪辑的情况下执行此操作,只需使用独特的边框.这也应该是跨浏览器兼容的,但我还没有对所有内容进行测试

最初将它划分为2个独立的div/triangle并加入它们,但感谢web-tiki并kaiido完善它只使用1个div和最小的CSS

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}