Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

来源：互联网发布：淘宝卖家寄快递怎么做编辑：程序博客网时间：2024/06/05 17:05

原文地址：https://css-tricks.com/solving-last-item-problem-circular-distribution-partially-overlapping-items/

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .item {            position: absolute;            margin: calc(50vh - 1em) 0 0 calc(50vw - 1em);            width: 2em;            height: 2em;            transform: rotate(var(--a, 0deg)) translate(3em);            box-shadow: inset 0 0 0 4px;            background: gainsboro;            font: 900 2em/ 2em trebuchet ms, tahoma, verdana, sans-serif;            text-align: center;        }        .item:nth-child(2) {            --a: 30deg;        }        .item:nth-child(3) {            --a: 60deg;        }        .item:nth-child(4) {            --a: 90deg;        }        .item:nth-child(5) {            --a: 120deg;        }        .item:nth-child(6) {            --a: 150deg;        }        .item:nth-child(7) {            --a: 180deg;        }        .item:nth-child(8) {            --a: 210deg;        }        .item:nth-child(9) {            --a: 240deg;        }        .item:nth-child(10) {            --a: 270deg;        }        .item:nth-child(11) {            --a: 300deg;        }        .item:nth-child(12) {            --a: 330deg;        }    </style></head><body><div class='item'>0</div><div class='item'>1</div><div class='item'>2</div><div class='item'>3</div><div class='item'>4</div><div class='item'>5</div><div class='item'>6</div><div class='item'>7</div><div class='item'>8</div><div class='item'>9</div><div class='item'>10</div><div class='item'>11</div></body></html>

阅读全文

0 0