gpt4 book ai didi

html - 如何在 CSS 中绘制一个带有开始和结束位置的圆扇区(以度为单位)

转载 作者:行者123 更新时间:2023-11-27 23:33:30 26 4
gpt4 key购买 nike

<分区>

我正在尝试创建一个圆形扇区。该扇区应在 CSS 中构建,并带有以度为单位的起始位置和结束位置。

例如:startPosition: 155deg; endPosition: 245deg;

enter image description here

我试图在这里找到这个问题的答案: How to draw a circle sector in CSS?

但没有一个答案真正对我有帮助。

到目前为止,这是我的代码 ( http://jsfiddle.net/idoglik6/1mvgnsrc/ ):

.pivot-control {
float: left;
position: relative;
}
.pivot-control .pivot-container {
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #2e3d5d;
box-sizing: border-box;
background-color: #bcd0e7;
width: 76px;
height: 76px;
}
.pivot-control .pivot-container .pivot-circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.pivot-control .pivot-container .pivot-circle .pivot-hand {
position: relative;
background: #228ad5;
height: 38px;
left: 49%;
top: 0;
transform-origin: 50% 100%;
width: 2px;
box-shadow: 0 -2px 0 2px #fafafa;
}
<div class="pivot-control">
<div class="pivot-container">
<div class="pivot-circle">
<div class="pivot-hand" >
</div>
</div>
</div>
</div>

谢谢!

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com