|
|

楼主 |
发表于 2022-4-24 20:19
|
显示全部楼层
原创代码:
- <style>
- .mBox {
- --w: 200px;
- margin: auto;
- display: flex;
- justify-content: center;
- align-items: center;
- width: var(--w);
- height: var(--w);
- position: relative;
- }
- .zBox {
- position: absolute;
- display: block;
- border-style: solid;
- border-width: 1px;
- border-color: transparent darkgreen transparent transparent;
- }
- </style>
- <div class="mBox"></div>
- <script>
- let ele = document.querySelector(".mBox");
- let len= ele.clientWidth;
- let zStr = "";
- let all = 100;
- let angle = Math.floor(360 / all);
- for(j=0; j< all; j++){
- let wh =Math.floor(len- j * (len / all));
- zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
- }
- ele.innerHTML += zStr;
- console.log(zStr);
- </script>
复制代码
|
|