使用 CSS 和 HTML 的循环导航

Question

我需要制作一个类似于以下链接的圆形导航菜单，形状上。我需要在我的按钮上有六个按钮。问题是，我需要只使用 CSS 和 HTML 来做到这一点。我为此做了各种尝试，但我对如何实现它感到茫然。我已经尝试过变换、绝对定位和其他方式......但我没有得到像样的结果。如果有人能帮我设计按钮，我将不胜感激。我已经包含了我的容器div 以供参考。

相似形状示例

.circle-main {
background-color: rgba(255, 190, 0, 1.00);
border-radius: 50%;
height: 400px;
margin: 0 auto;
width: 400px;
}
.circle-center {
background-color: rgba(255, 255, 255, 1.00);
border-radius: 50%;
height: 250px;
margin: 75px auto 0px 75px;
position: absolute;
width: 250px;
}

<div class="circle-container">
<div class="circle-main">
<div class="circle-center"></div>
</div>
</div>

Answer 1

这可以通过 CSS 转换来实现：

html,
body {
font-size: 20px;
background-color: white;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.nav-wrapper {
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
top: 0;
left: 50%;
border-radius: 50%;
margin-left: -13em;
-webkit-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
transition: all 0.3s ease;
border-radius: 50%;
pointer-events: auto;
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-wrapper li {
position: absolute;
width: 10em;
height: 10em;
border: 1px solid white;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1em;
margin-left: -6em;
transition: border 0.3s ease;
}
.nav-wrapper li:first-child {
-webkit-transform: rotate(0deg) skew(45deg);
transform: rotate(0deg) skew(45deg);
}
.nav-wrapper li:nth-child(2) {
-webkit-transform: rotate(45deg) skew(45deg);
transform: rotate(45deg) skew(45deg);
}
.nav-wrapper li:nth-child(3) {
-webkit-transform: rotate(90deg) skew(45deg);
transform: rotate(90deg) skew(45deg);
}
.nav-wrapper li:nth-child(4) {
-webkit-transform: rotate(135deg) skew(45deg);
transform: rotate(135deg) skew(45deg);
}
.nav-wrapper li:nth-child(5) {
-webkit-transform: rotate(180deg) skew(45deg);
transform: rotate(180deg) skew(45deg);
}
.nav-wrapper li:nth-child(6) {
-webkit-transform: rotate(225deg) skew(45deg);
transform: rotate(225deg) skew(45deg);
}
.nav-wrapper li:nth-child(7) {
-webkit-transform: rotate(270deg) skew(45deg);
transform: rotate(270deg) skew(45deg);
}
.nav-wrapper li:nth-child(8) {
-webkit-transform: rotate(315deg) skew(45deg);
transform: rotate(315deg) skew(45deg);
}
.nav-wrapper li a {
display: block;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
padding-top: 1.8em;
background-color: #81d8d0;
-webkit-transform: skew(-45deg) rotate(-45deg) scale(1);
transform: skew(-45deg) rotate(-45deg) scale(1);
transition: opacity 0.3s, color 0.3s;
}
.nav-wrapper li a:hover {
background-color: #a8e4df;
}

<div class="nav-wrapper">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>

Answer 2

您可以使用D3.js 创建圆环图(通过D3 圆环饼图(

// Seed data to populate the donut pie chart
var seedData = [{
"label": "btn1",
"value": 25,
"link": "https://example.com/"
}, {
"label": "btn2",
"value": 25,
"link": "https://example.com/"
}, {
"label": "btn3",
"value": 25,
"link": "https://example.com/"
}, {
"label": "btn4",
"value": 25,
"link": "https://example.com/"
}, {
"label": "btn5",
"value": 25,
"link": "https://example.com/"
}, {
"label": "btn6",
"value": 25,
"link": "https://example.com/"
}];
// Define size & radius of donut pie chart
var width = 450,
height = 450,
radius = Math.min(width, height) / 2;
// Define arc colours
var colour = d3.scaleOrdinal(d3.schemeCategory20);
// Define arc ranges
var arcText = d3.scaleOrdinal()
.range([0, width]);
// Determine size of arcs
var arc = d3.arc()
.innerRadius(radius - 130)
.outerRadius(radius - 10);
// Create the donut pie chart layout
var pie = d3.pie()
.value(function(d) {
return d["value"];
})
.sort(null);
// Append SVG attributes and append g to the SVG
var svg = d3.select("#donut-chart")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Define inner circle
svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 100)
.attr("fill", "#fff");
// Calculate SVG paths and fill in the colours
var g = svg.selectAll(".arc")
.data(pie(seedData))
.enter().append("g")
.attr("class", "arc")
// Make each arc clickable 
.on("click", function(d, i) {
window.location = seedData[i].link;
});
// Append the path to each g
g.append("path")
.attr("d", arc)
.attr("fill", function(d, i) {
return colour(i);
});
// Append text labels to each arc
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("fill", "#fff")
.text(function(d, i) {
return seedData[i].label;
})
g.selectAll(".arc text").call(wrap, arcText.range([0, width]));
// Append text to the inner circle
svg.append("text")
.attr("dy", "-0.5em")
.style("text-anchor", "middle")
.attr("class", "inner-circle")
.attr("fill", "#36454f")
.text(function(d) {
return '';
});
svg.append("text")
.attr("dy", "1.0em")
.style("text-anchor", "middle")
.attr("class", "inner-circle")
.attr("fill", "#36454f")
.text(function(d) {
return '';
});
// Wrap function to handle labels with longer text
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
console.log("tspan: " + tspan);
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > 90) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
font-family: Roboto;
}
.content h1 {
font-weight: 500;
text-align: center;
}
svg#donut-chart {
display: block;
margin: 0 auto;
}
text.inner-circle {
font-weight: 400;
font-size: 20px;
text-transform: uppercase;
}
.arc {
cursor: pointer;
}
.arc:hover {
opacity: .85;
}
.arc text {
font-weight: 300;
font-size: 18px;
color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<svg id="donut-chart"></svg>
</div>