28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形

<!-- penrose: 彭罗斯 --><div class="penrose"> ???<span></span> ???<span></span> ???<span></span></div>

html, body { ???margin: 0; ???padding: 0; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: black;}/* 定位容器尺寸 */.penrose{ ???position: relative; ???width: 20em; ???height: 20em; ???color: red; ???animation: rotating 30s linear infinite; ???transform-origin: 66% 66%;}@keyframes rotating { ???0% { ???????color: red; ???????transform: rotate(0deg); ???} ???20% { ???????color: yellow; ???} ???40% { ???????color: lime; ???} ???60% { ???????color: blue; ???} ???80% { ???????color: fuchsia; ???} ???100% { ???????color: red; ???????transform: rotate(720deg); ???}}.penrose span { ???position: absolute; ???width: 100%; ???height: 100%; ???/* currentColor: 当前颜色 */ ???background-color: currentColor; ???/* 用遮罩切出每一条边，组成彭罗斯三角形 */ ???clip-path: polygon(57% 0, 75% 0, 26% 85%, 89.5% 85%, 98.4% 100%, 0 100%);}.penrose span:nth-child(1) { ???/* 过滤器 亮度1 */ ???filter: brightness(1); ???transform: rotate(0deg);}.penrose span:nth-child(2) { ???top: 18.3%; ???left: 43.3%; ???filter: brightness(0.66); ???transform: rotate(120deg);}.penrose span:nth-child(3) { ???top: 46.5%; ???left: 5.9%; ???filter: brightness(0.33); ???transform: rotate(240deg);}