css - 如何通过css将一侧划分为2d？

Question

我想像下图一样进行划分。我试图通过 CSS3 变换属性来制作它，但它使全除法 2D。我只想制作左上角。你能帮帮我吗？

标签： css

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

}