CSS折角的原理解析

转自：https://www.cnblogs.com/yhhBKY/p/10642696.html

解释：

  // 两种颜色的百分比第一个大于等于第二个，或者设置了固定的像素就会变得很分明，根据一个颜色透明一个设置角度再加上分明的边界就是折角的原理了

  background: linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom

      right,

    linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,

    linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,

    linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;

  background-size: 50% 50%;