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

HTML代碼：

<div class="diamond">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

CSS代碼：

/* 內容居中 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
}
/* 一個部分的四個顏色 */
:root{
    --color1: deepskyblue;
    --color2: steelblue;
    --color3: royalblue;
    --color4: dodgerblue;
}
.diamond{
    /* 顯示：網格 */
    display:grid;
    /* 左右占比 */
    grid-template-columns:1fr 1fr;
    /* 傾斜45度 */
    transform:rotate(45deg);
}
.diamond span{
    /* border: 50px solid red; */
    border-width:50px;
    border-style:solid;
    /* 上右下左 */
    border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
/* 設置第一個span的border-color */
.diamond span:first-child {
    /* transparent 透明 */
    border-color: transparent var(--color2) var(--color3) transparent;
}

.diamond span:not(:first-child) {
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        border-color: var(--color1) var(--color2) var(--color3) var(--color4);
    }
    25% {
        border-color: var(--color4) var(--color1) var(--color2) var(--color3);
    }
    50% {
        border-color: var(--color3) var(--color4) var(--color1) var(--color2);
    }
    75% {
        border-color: var(--color2) var(--color3) var(--color4) var(--color1);
    }
    100% {
        border-color: var(--color1) var(--color2) var(--color3) var(--color4);
    }
}

總結

以上是生活随笔為你收集整理的6. 纯 CSS 绘制一颗闪闪发光的璀璨钻石的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。