CSS创建折角效果

第1步——剪角

角度可以任意 ，看个人喜好，个人选择210deg

 #div {
     width: 200px;
     height: 100px;
     margin: 100px;
     padding: 20px;
     position: relative;
     background: linear-gradient(210deg, transparent 1.5em, blue 0);
  }

//   背景从右上角开始像210度方向裁剪，长度为1.5em,1.5倍div字体大小 

第2步——添加折角

#div::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 3em;
     height: 1.73em;
     background: linear-gradient(210deg, red 50%, black 0); 
}

第3步——改变添加折角的角度

想要的折角上上图中红色部分以它斜边为对称轴的对称部分，而上面background: linear-gradient(210deg, red 50%, black 0);中，不管before中width和height是多少，都是在50%处以上为red，因此，考虑到将before中width和height对换,同时渐变的角度+30即240deg：

#div::before {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              width: 1.73em;
              height: 3em;
              background: linear-gradient(240deg, red 50%, black 0);
}

第4步——将添加折角向上平移

 将添加的折角向上平移到其底部和剪掉的三角形最右下重合，即上移3-1.73~=1.3

#div::before {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              width: 1.73em;
              height: 3em;
              background: linear-gradient(240deg, red 50%, black 0);
              transform: translateY(-1.3em); 
}

第5步——将添加折角向上平移后旋转

以右下角为旋转中心逆时针旋转30deg，

#div::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.73em;
    height: 3em;
    background: linear-gradient(240deg, red 50%, black 0);
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
}

 

第6步——添加阴影效果

将background中的red换成transparent，再添加阴影效果

#div::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.73em;
    height: 3em;
    background: linear-gradient(240deg, transparent 50%, #138a18 0);
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -0.2em 0.2em 0.3em -0.1em #065206;
}