как сделать деление одной стороны 2d по css?

Question

Я хочу сделать деление, как на картинке ниже. я пытался сделать это с помощью CSS3 transform свойство, но это делает полное деление 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

}