众所周知，CSS能做网页样式的美化。但是今天，咱玩点花的——折纸，启动！
效果展示
小知识
1. background 属性可以使用各种渐变叠加
2. 最上层的背景拥有更高的层级，也就是会盖住下面的，可理解为PS的图层
3. background-repeat 属性是会重复的，如果你感觉不对劲，请设置为 none
4. 1.87em 1.94em/0.88em 0.88em 此为简写，含义为 位置 X、Y / 尺寸 W、H。这在多背景叠加时很有用，如果你喜欢单独拎出来，也不是不行
5. 不是哥们，哪有那么多，直接弄呗…
完整代码
HTML：
<div></div> // 是的，就一个div
CSS：
body {
height: 100vh;
background-color: #2e2e2e;
display: grid;
place-items: center;
}
div {
width: 6em;
height: 5em;
background:
/* 内面翻折添加折痕 */
linear-gradient(135deg,
transparent 49%,
rgba(128, 0, 0, 0.4) 50%,
transparent 55%) 1.87em 1.94em/0.88em 0.88em,
/* 内面翻折 */
linear-gradient(45deg,
transparent 54.5%,
#ffa500 55%) 0.78em 1.94em/2.1em 2.1em,
/* 内面交接阴影 */
linear-gradient(-85deg,
transparent 3%,
rgba(128, 0, 0, 0.5) 8.3%,
transparent 8.4%) 1.28em 0.36em/1.6em 1.6em,
/* 内面颜色补充 */
linear-gradient(-85deg,
#ffa500 7.5%,
transparent 8.5%) 1.28em 0.36em/1.6em 1.6em,
/* 贴近颈部处三角 */
linear-gradient(-45deg,
#ff6347 50.5%,
transparent 51%) 1.28em 0.35em/1.6em 1.6em,
/* 前后分割部分阴影 */
linear-gradient(85deg,
rgba(128, 0, 0, 0.7),
transparent 15%) 2.86em 0.35em/2.5em 3.45em,
/* 翅膀 */
linear-gradient(-45deg,
transparent 54%,
#ff6347 54.5%) 2.8em 0.35em/2.5em 2.5em,
/* 翅膀与尾部阴影 */
linear-gradient(120deg,
rgba(128, 0, 0, 0.5) 30%,
transparent 40%) 2.9em 2.05em/0.55em 1.75em,
/* 翅膀与颈部阴影 */
linear-gradient(148deg,
transparent 35%,
rgba(128, 0, 0, 0.5) 50%) 1em 0.95em/2em 1em,
/* 颈部、躯干、尾部 */
linear-gradient(45deg,
transparent 22%,
#ff6347 22.1%, #ff6347 49.2%,
transparent 49.3%) 1em 0.3em/5em 3.5em,
/* 头顶 */
linear-gradient(24deg,
#ff6347 53.5%,
transparent 54%) 1em 0/0.68em 0.35em,
/* 头部阴影 */
linear-gradient(-83deg,
rgba(128, 0, 0, 0.5) 5%,
transparent 15%) 0 0/1em 1em,
/* 嘴 */
linear-gradient(130deg,
transparent 54%,
#ffa500 54.5%) 0 0/1em 1em;
background-repeat: no-repeat;
scale: 4;
}
数据调了半天，如果发现有不对劲的地方，感兴趣的佬友自己调整一下。那么，举一反三，蹲其它折纸花活
在线预览
往期精选：
大佬们点赞到 50，俺把 LINUX DO 也折一折，球球 
