5-1 45deg 折角

image.png

  1.       .box{
  2.             margin:100px;
  3.             width: 300px;
  4.             height: 200px;
  5.             background: lavender;
  6.             background: linear-gradient(to left bottom,transparent 50% ,rgba(153, 140, 140,                         0.4) 0)no-repeat 100% 0/2em 2em,
  7.             linear-gradient(-135deg,transparent 1.5em,lavender 0);
  8.         }

5-2 其他角度

image.png

  1.         .note {
  2.             margin:100px;
  3.             width: 300px;
  4.             height: 200px;
  5.             position: relative;
  6.             background: #58a; /* 回退样式 */
  7.             background:
  8.             linear-gradient(-150deg,
  9.             transparent 1.5em, #58a 0);
  10.             border-radius: .5em;
  11.         }
  12.         .note::before {
  13.             content: '';
  14.             position: absolute;
  15.             top: 0; right: 0;
  16.             background: linear-gradient(to left bottom,
  17.             transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
  18.             100% 0 no-repeat;
  19.             width: 1.73em;
  20.             height: 3em;
  21.             transform: translateY(-1.3em) rotate(-30deg);
  22.             transform-origin: bottom right;
  23.             border-bottom-left-radius: inherit;
  24.             box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
  25.         }