HTML
<div class="poster">
<div class="rectangle-container">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>
<div class="circle">
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
<div class="circle__stripe"></div>
</div>
</div>
SCSS
$orange: #ffa300;
$blue: #399cad;
$red: #ef3641;
body {
margin: 0;
background-color: rgba(17, 17, 17, 0.9);
height: 100vh;
}
* {
box-sizing: border-box;
}
.poster {
background-color: $orange;
width: 400px;
height: 541px;
position: relative;
padding: 0 34px;
margin: 0 auto;
display: flex;
top: 50%;
transform: translateY(-50%);
}
.rectangle-container {
margin-top: 80px;
margin-left: auto;
z-index: 1;
.rectangle {
width: 166px;
height: 11px;
background-color: $blue;
margin-bottom: 11px;
}
}
.circle {
top: 168px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
width: 186px;
border-radius: 50%;
overflow: hidden;
&__stripe {
width: 186px;
height: 11px;
&:nth-child(odd) {
background: #ef393f;
background: linear-gradient(to right, #ef393f 0%,#ef393f 50%, #faa31b 50%,#faa31b 100%);
}
&:nth-child(even) {
background: #ef393f;
background: linear-gradient(to left, #ef393f 0%,#ef393f 50%, #faa31b 50%,#faa31b 100%);
}
}
}
