使用 CSS 创建 div 的对角线顶部

Question

我正在开发一个项目，我想使用 CSS 创建一个对角线 div，如下图所示：

Answer 1

您可以使用 css“剪辑路径”。这很容易理解。

#shape {
  -webkit-clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
  width:200px;
  height:200px;
  background-color:black;
}

<div id='shape'></div>