您的位置：首页 > 移动开发

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

2017-06-15 14:19 537 查看

原文地址：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 var calc

相关文章推荐

新的分享

章节导航