【发布时间】：2021-08-10 04:09:53
【问题描述】：
<td>
<ul id="defects-pentagon">
<li>
<input type="checkbox" name="Defects" id="Taily" className="defect-taily" value="Taily"/>
<label for="Taily">Taily</label>
<div className="defect-taily-pentagon"></div>
</li>
<li>
<input type="checkbox" name="Defects" id="Tapered" className="defect-tapered" value="Tapered"/>
<label for="Tapered">Tapered</label>
<div className="defect-tapered-pentagon"></div>
</li>
<li>
<input type="checkbox" name="Defects" id="Curvy" className="defect-curvy" value="Curvy"/>
<label for="Curvy">Curvy</label>
<div className="defect-curvy-pentagon"></div>
</li>
<li>
<input type="checkbox" name="Defects" id="Bumpy" className="defect-bumpy" value="Bumpy"/>
<label for="Bumpy">Bumpy</label>
<div className="defect-bumpy-pentagon"></div>
</li>
<li>
<input type="checkbox" name="Defects" id="Irregular" className="defect-irregular" value="Irregular"/>
<label for="Irregular">Irregular</label>
<div className="defect-irregular-pentagon"></div>
</li>
</ul>
</td>.defect-taily-pentagon {
width:.3rem;
height:4.7rem;
background:#d70022;
position: relative;
transform: rotate(56deg);
top: -90%;
left: 100%;
}
.defect-tapered-pentagon {
width:.3rem;
height:4.7rem;
background:#d70022;
position: relative;
transform: rotate(-56deg);
top: -90%;
right: -50%
}
.defect-curvy-pentagon {
width:.3rem;
height:4.5rem;
background:#d70022;
position: relative;
transform: rotate(-19deg);
top: -100%;
left: 85%;
}
.defect-bumpy-pentagon {
width:.3rem;
height:4.5rem;
background:#d70022;
position: relative;
transform: rotate(19deg);
top: -100%;
right: -66%;
}
.defect-irregular-pentagon {
width:.3rem;
height:4.5rem;
background:#d70022;
position: relative;
transform: rotate(90deg);
top: -155%;
left: 75%;
}我正在尝试在 css 中创建一个五边形，其中每个边缘都是一个复选框按钮。我创建了 5 个按钮并将它们的大小更改为小而细的矩形。使用 rem 单位，我能够旋转和定位每个按钮，使它们形成五边形。但是，当缩小/扩大我的浏览器窗口时，按钮会左右移动。
我正在寻找一种可以将每个按钮连接在一起并将整个对象作为一个单元移动以将其放置在我的网页上的方法。我认为问题在于 rem 单位和 % 单位的使用，因为它们是相对于整个浏览器大小而不是它们所在的分隔线的大小。
每个按钮的代码都是相同的，除了 id/className/label 和页面上的相对位置（顶部/左侧）。
JavaScript
<li>
<input type="checkbox"
id="Taily"
className="defect-taily"/>
<label for="Taily"> Taily </label>
</li>
CSS
.defect-taily-pentagon {
width:.3rem;
height:4.7rem;
background:#d70022;
position: relative;
transform: rotate(56deg);
top: -90%;
left: 100%;
}
附：我无法发布图片，因为这是我在 stackoverflow 上的第一篇文章。有空我会发图。
【问题讨论】：
-
你说得对，以这种方式使用 % 是行不通的。改为使用 vmin 作为单位进行调查。
-
你能在你的问题中添加一个工作片段吗？
-
请包含您使用 sn-p 编辑器创建五边形的所有代码。
标签： javascript html css checkbox browser