<div class="g-parent">
<div class="g-container">
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
</div>
</div>
xxxxxxxxxx
html, body {
width: 100vw;
height: 100vh;
display: flex;
}
.g-parent {
margin: 50px auto;
}
.g-container,
.g-parent {
position: relative;
display: flex;
width: 150px;
height: 150px;
}
.g-item {
position: absolute;
width: 4px;
height: 12px;
background: #000;
left: 0;
top: 0;
}
@for $i from 1 through 16 {
.g-item:nth-child(#{$i}) {
transform-origin: 0 150px;
transform: rotate(#{($i - 1) * 6deg});
}
}
.g-container {
box-reflect: below 4px;
}
.g-parent {
box-reflect: left -4px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.