HTML
<div class="entire-circle">
<div class="crop-1">
<div class="align-biz"></div>
</div>
<div class="crop-2">
<div class="compliance"></div>
</div>
<div class="crop-3">
<div class="technology"></div>
</div>
<div class="crop-4">
<div class="legal"></div>
</div>
<div class="crop-5">
<div class="big-three"></div>
</div>
<div class="crop-6">
<div class="market-strategy"></div>
</div>
</div>
<div class="stroke" style="left: 297px;">
<div class="stroke" style="transform: rotate(60deg);"></div>
<div class="stroke" style="transform: rotate(120deg);"></div>
</div>
<div class="circle-stroke"></div>
<div class="text-layers"></div>
CSS
.entire-circle {
width: 600px;
height: 600px;
position: relative;
border-radius: 50%;
background-color: rgb(136, 143, 255);
}
.crop-1 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
}
.align-biz {
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.crop-2 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
transform: rotate(60deg);
}
.compliance {
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.crop-3 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
transform: rotate(120deg);
}
.technology {
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.crop-4 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
transform: rotate(180deg);
}
.legal {
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.crop-5 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
transform: rotate(240deg);
}
.big-three{
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.crop-6 {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 600px, 600px, 300px);
transform: rotate(300deg);
}
.market-strategy {
background-color: #0A2330;
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 600px;
border-radius: 50%;
clip: rect(0px, 300px, 600px, 0px);
transform: rotate(60deg);
}
.market-strategy:active {
background-color: #F08529;
}
.stroke {
background-color: #fff;
position: absolute;
top: 0px;
width: 6px;
height: 600px;
}
.circle-stroke {
box-sizing: border-box;
width: 600px;
height: 600px;
top: 0px;
position: absolute;
border-radius: 50%;
border: 6px solid #fff;
}
.text-layers {
content: url(http://fintech513.com/wp-content/uploads/2018/04/360-approach-text.svg);
width: 600px;
height: 600px;
top: 0px;
position: absolute;
}
