我知道您可以使用边框半径 hack 在 CSS3 中制作一个圆圈。但是有没有办法让他们有像这张图这样的片段呢?有没有办法通过 HTML 和 CSS 而不是 JS 来做到这一点?
最佳答案
是的,您可以使用以下两种方法之一来获得自定义 Angular 此类切片:
- 如果您不需要切片本身就是元素,您可以简单地使用一个元素和线性渐变来实现 - 参见 rainbow wheel我上个月做过。
- 如果您需要切片本身就是元素,那么您可以通过链接旋转和倾斜变换来实现 - 参见 circular menu我刚才做过。
对于 #2,另请参阅非常简化的 example我现在就做了。
.pie {
overflow:hidden;
position: relative;
margin: 1em auto;
border: dashed 1px;
padding: 0;
width: 32em; height: 32em;
border-radius: 50%;
list-style: none;
}
.slice {
overflow: hidden;
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%;
}
.slice:first-child {
transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;
background: lightblue;
}
.slice:first-child .slice-contents {
transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */
<ul class='pie'>
<li class='slice'>
<div class='slice-contents'></div>
</li>
<!-- you can add more slices here -->
</ul>
关于css - 使用 CSS3 将圆圈分段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32625870/