如何用css进行2d分割？

Question

我想进行下图所示的划分。我试图通过CSS3转换属性来制作它，但它可以进行2D全分割。我想做左上方。你能帮我吗？

Answer 1

尝试这个:)，不是您想要的确切CSS，但是希望这会有所帮助。检查此链接的输出。 >> http://prntscr.com/lijc08

.hvr-curl-top-right {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px transparent;
   position: relative;
}
.hvr-curl-top-right:before {
  width: 20px;
  height: 20px;
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: -2px;
  background: transparent;
  // background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
  background: -webkit-linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
  background: linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
  -webkit-transition-property: width, height;
  transition-property: width, height

}