【发布时间】：2021-05-07 18:07:28
【问题描述】：
我正在尝试将环分成 4 个相等的部分。此甜甜圈环可在该段的所有部分上单击。但是当我试图改变倾斜时，它不能使它们相等，实际上在当前的甜甜圈环中，顶部的左右边界有一条双线。与左右部分相比，顶部和底部部分要大得多。
这段代码 sn-p 是我尝试过的。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
}
.pie {
position: relative;
margin: 1em auto;
border: 4px solid black;
padding: 0;
width: 15em;
height: 15em;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
border: 2px solid black;
box-sizing: border-box;
}
.slice-contents {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
}
.slice:nth-child(1) {
transform: rotate(-60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(1) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(2) {
transform: rotate(60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(2) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(3) {
transform: rotate(180deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(3) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(4) {
transform: rotate(120deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(4) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.inner-pie {
position: absolute;
width: 7em;
height: 7em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 4px solid black;
background: white;
}
#top, #bottom, #left, #right, #center {
cursor: pointer
}
</style>
</head>
<body>
<div class="container">
<ul class='pie'>
<li class='slice'>
<div id="top" class='slice-contents'>click 1</button>
</li>
<li class='slice'>
<div id="right" class='slice-contents'>click 2</button>
</li>
<li class='slice'>
<div id="left" class='slice-contents'>click 3</button>
</li>
<li class='slice'>
<div id="bottom" class='slice-contents'>click 4</button>
</li>
<li id="center" class='inner-pie'>
</li>
<ul>
</div>
</body>
<script>
document.getElementById('top').onclick = function() {
document.getElementById("top").style.backgroundColor = "red";
};
document.getElementById('bottom').onclick = function() {
document.getElementById("bottom").style.backgroundColor = "red";
};
document.getElementById('right').onclick = function() {
document.getElementById("right").style.backgroundColor = "red";
};
document.getElementById('left').onclick = function() {
document.getElementById("left").style.backgroundColor = "red";
};
document.getElementById('center').onclick = function() {
document.getElementById("center").style.backgroundColor = "red";
};
</script>
</html>
【问题讨论】：
-
老实说，使用 SVG。全面更简单
-
请检查您的代码是否有正确的结束标签。
ul未关闭。