<!DOCTYPE html>
<html>
<head>
<style>
.constellation {
margin: 0 auto;
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fff;
overflow: hidden;
transform: rotateZ(22.5deg);
}
.constellation-part {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0 100%;
box-sizing: border-box;
}
.constellation-part:hover {
background-color: #ccc;
}
.part-1 {
transform: rotate(0deg) skewY(-46deg);
background-color: orangered;
}
.part-2 {
transform: rotate(45deg) skewY(-46deg);
background-color: cyan;
}
.part-3 {
transform: rotate(90deg) skewY(-46deg);
background-color: blueviolet;
}
.part-4 {
transform: rotate(135deg) skewY(-46deg);
background-color: #f0f;
}
.part-5 {
transform: rotate(180deg) skewY(-46deg);
background-color: #ff0;
}
.part-6 {
transform: rotate(225deg) skewY(-46deg);
background-color: #f01;
}
.part-7 {
transform: rotate(270deg) skewY(-46deg);
background-color: #edf;
}
.part-8 {
transform: rotate(315deg) skewY(-46deg);
background-color: #efa;
}
.part-9 {
transform: rotate(240deg) skewY(-46deg);
background-color: #ff1;
}
.part-10 {
transform: rotate(270deg) skewY(-46deg);
background-color: #edf;
}
.part-11 {
transform: rotate(300deg) skewY(-46deg);
background-color: #c7c;
}
.part-12 {
transform: rotate(330deg) skewY(-46deg);
background-color: #c0f;
}
.part-13 {
background-color: #ddd;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 50%;
border-radius: 50%;
margin: auto;
}
</style>
</head>
<body>
<div class="constellation">
<div class="part-1 constellation-part"></div>
<div class="part-2 constellation-part"></div>
<div class="part-3 constellation-part"></div>
<div class="part-3 constellation-part"></div>
<div class="part-4 constellation-part"></div>
<div class="part-5 constellation-part"></div>
<div class="part-6 constellation-part"></div>
<div class="part-7 constellation-part"></div>
<div class="part-8 constellation-part"></div>
<!-- <div class="part-9 constellation-part"></div>
<div class="part-10 constellation-part"></div>
<div class="part-11 constellation-part"></div>
<div class="part-12 constellation-part"></div> -->
<div class="part-13"></div>
</div>
</body>
</html>
css圆形导航菜单
最新推荐文章于 2024-06-27 19:33:08 发布