<style>
* {
margin: 0;
}
#wrapper {
position: relative;
left: 400px;
top: 200px;
}
.main1 {
}
.main2 {
transform: rotate(30deg);
}
.main3 {
transform: rotate(60deg);
}
.main4 {
transform: rotate(90deg);
}
.main5 {
transform: rotate(120deg);
}
.main6 {
transform: rotate(150deg);
}
.main7 {
transform: rotate(180deg);
}
.main8 {
transform: rotate(210deg);
}
.main9 {
transform: rotate(240deg);
}
.main10 {
transform: rotate(270deg);
}
.main11 {
transform: rotate(300deg);
}
.main12 {
transform: rotate(330deg);
}
.main51 {
transform: rotate(60deg);
}
.main52 {
transform: rotate(120deg);
}
.main53 {
transform: rotate(180deg);
}
.main54 {
transform: rotate(240deg);
}
.main55 {
transform: rotate(300deg);
}
.main56 {
transform: rotate(360deg);
}
.tool {
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 300px solid blue;
position: absolute;
top: 10;
left: 0;
}
.too2 {
width: 0px;
height: 0px;
border-right:10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: 100;
left: 30;
}
</style>
<div id="wrapper">
<div class="tool main1"></div>
<div class="tool main2"></div>
<div class="tool main3"></div>
<div class="tool main4"></div>
<div class="tool main5"></div>
<div class="tool main6"></div>
<div class="tool main7"></div>
<div class="tool main8"></div>
<div class="tool main9"></div>
<div class="tool main10"></div>
<div class="tool main11"></div>
<div class="tool main12"></div>
<div class="too2 main51"></div>
<div class="too2 main52"></div>
<div class="too2 main53"></div>
<div class="too2 main54"></div>
<div class="too2 main55"></div>
<div class="too2 main55"></div>
</div>