css - 如何通过 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