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

Posted 2020-08-18

原文地址：https://segmentfault.com/a/1190000014946883

感想：三个平面图形旋转

html代码：

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

CSS代码：

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);
}