仅1个div实现多个正方体矩阵效果代码-html代码-BFW代码库

仅1个div实现多个正方体矩阵效果代码

代码语言：html

代码描述：仅1个div实现多个正方体矩阵效果代码，仅仅使用一个div，结合一些css代码实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .cube {
          --m: 4; /* number of columns */
          --n: 5; /* number of rows */
          --size: 40px; /* size of the cubes */
          --gap :10px;  /* gap between cubes */
          
          margin: auto;
          aspect-ratio: var(--m)/var(--n);
          width: calc(var(--m)*(1.353*var(--size) + var(--gap)));
          background:
            conic-gradient(from -90deg at var(--size) calc(0.353*var(--size)),
              #249FAB 135deg,#81C5A3 0 270deg,#26609D 0); /* update the colors here */
          -webkit-mask:
            linear-gradient(to bottom right,
               #0000 calc(0.25*var(--size)),#000 0 calc(100% - calc(0.25*var(--size)) - 1.414*var(--gap)),#0000 0),
            conic-gradient(from -90deg at right var(--gap) bottom var(--gap),#000 90deg,#0000 0);
    .........完整代码请登录后点击上方下载按钮下载查看