Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="bike">
<div class="wheel wheel--front">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="wheel wheel--back">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
</div>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$color: #666;
$size: 300px;
.bike {
position: relative;
width: $size;
height: $size;
border: 1px dashed $color;
}
.wheel {
border-radius: 50%;
border: 1px solid $color;
height: $size / 3;
width: $size / 3;
position: absolute;
}
.wheel--front {
bottom: 0;
left: 0;
}
.wheel--back {
bottom: 0;
right: 0;
}
.spoke {
width: 100%;
position: absolute;
top: 50%;
border-bottom: 1px solid lighten($color, 40%);
}
.spoke--1 {
transform: rotate(36deg);
}
.spoke--2 {
transform: rotate(72deg);
}
.spoke--3 {
transform: rotate(108deg);
}
.spoke--4 {
transform: rotate(144deg);
}
.bike {
position: relative;
width: 300px;
height: 300px;
border: 1px dashed #666;
}
.wheel {
border-radius: 50%;
border: 1px solid #666;
height: 100px;
width: 100px;
position: absolute;
}
.wheel--front {
bottom: 0;
left: 0;
}
.wheel--back {
bottom: 0;
right: 0;
}
.spoke {
width: 100%;
position: absolute;
top: 50%;
border-bottom: 1px solid #cccccc;
}
.spoke--1 {
transform: rotate(36deg);
}
.spoke--2 {
transform: rotate(72deg);
}
.spoke--3 {
transform: rotate(108deg);
}
.spoke--4 {
transform: rotate(144deg);
}
<div class="bike">
<div class="wheel wheel--front">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="wheel wheel--back">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment