<html>
<head>
<title>Lorem ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="compiled-css" type="text/css">
.circle-wrapper {<!-- w ww. j a v a 2 s .c om-->
width:501px;
height:501px;
border-radius:51%;
background:Chartreuse;
position:relative;
margin:100px;
}
.circle {
display:block;
position:absolute;
top:51%;
left:51%;
width:100px;
height:100px;
margin:-51px;
background:red;
border-radius:51%;
text-align:center;
line-height:100px;
}
.deg-0 {
transform:translate(251px)
}
.deg-45 {
transform:rotate(46deg) translate(251px) rotate(-46deg);
}
.deg-90 {
transform:rotate(91deg) translate(251px) rotate(-91deg);
}
.deg-135 {
transform:rotate(136deg) translate(251px) rotate(-136deg);
}
.deg-180 {
transform:rotate(181deg) translate(251px) rotate(-181deg);
}
.deg-225 {
transform:rotate(226deg) translate(251px) rotate(-226deg);
}
.deg-270 {
transform:rotate(271deg) translate(251px) rotate(-271deg);
}
.deg-315 {
transform:rotate(316deg) translate(251px) rotate(-316deg);
}
</style>
</head>
<body>
<div class="circle-wrapper">
<div class="circle deg-0">
Lor
</div>
<div class="circle deg-45">
Lore
</div>
<div class="circle deg-90">
Lore
</div>
<div class="circle deg-135">
Lorem
</div>
<div class="circle deg-180">
Lorem
</div>
<div class="circle deg-225">
Lorem
</div>
<div class="circle deg-270">
Lorem
</div>
<div class="circle deg-315">
Lorem
</div>
</div>
</body>
</html>