在CSS中填充圆形扇区

Question

鉴于此：

var hoursStart = (7 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (10 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");

.clock {
  border: 5px solid #FFF;
  background-color: #e84c3d;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clock">
  <div class="start"></div>
  <div class="end"></div>
</div>

这将创建一个圆形：

我想要的效果是这样的：

我尝试了这段代码，但不符合我的要求：

$(".clock")
    .css("background-color", "blue")
    .css("background-image", 
    "linear-gradient(" + hoursStart +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd +"deg, #e74c3c 50%, transparent 50%)");

// These fields come from server
var start_hour = 8;
var end_hour = 10;

var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");


var start = hoursStart - 60;
var end = hoursEnd + 60;

$(".clock")
  .css("background-color", "blue")
  .css("background-image",
    "linear-gradient(" + hoursStart + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd + "deg, #e74c3c 50%, transparent 50%)");

body {
  background-color: #e74c3c;
}

.container {
  margin: 40px auto 20px;
  width: 250px;
}

.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="clock">
    <div class="start"></div>
    <div class="end"></div>
  </div>
</div>

Fiddle.

- Sirwan Afifi

---

请看这里的第二个代码片段 - https://dev59.com/D4zda4cB1Zd3GeqPo58j#31199281。我认为你需要的是那个动画的反向版本。 - Harry

Answer 1

我认为你想要的是通过更改脚本的这部分来实现。

var start =  hoursStart + 90;
var end = hoursEnd - 90;


$(".clock")
    .css("background-color", "blue")
    .css("background-image", 
    "linear-gradient(" + end +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start +"deg, #e74c3c 50%, transparent 50%)");

// These fields come from server
var start_hour = 7;
var end_hour = 10;

var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");


var start = hoursStart + 90;
var end = hoursEnd - 90;

$(".clock")
  .css("background-color", "blue")
  .css("background-image",
    "linear-gradient(" + end + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start + "deg, #e74c3c 50%, transparent 50%)");

body {
  background-color: #e74c3c;
}

.container {
  margin: 40px auto 20px;
  width: 250px;
}

.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="clock">
    <div class="start"></div>
    <div class="end"></div>
  </div>
</div>

fiddle

可以直接翻译为：一个包含链接文字“fiddle”的 HTML 段落标签。

- vals

Answer 2

.pieContainer {
  height: 100px;
}

.pieBackground {
  background-color: grey;
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: -1px 1px 3px #000;
  -webkit-box-shadow: -1px 1px 3px #000;
  -o-box-shadow: -1px 1px 3px #000;
  box-shadow: -1px 1px 3px #000;
}

.pie {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 50px, 100px, 0px);
}

.hold {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 100px, 100px, 50px);
}

#pieSlice1 .pie {
  background-color: #1b458b;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  transform: rotate(50deg);
}

<div class="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSlice1" class="hold">
    <div class="pie"></div>
  </div>
</div>

{{链接1: Fiddle}}

- Korgrue

---

哎呀，我本来以为我已经做了。我的错。谢谢你把它添加进去，因为源代码有些解释了这个工作原理。 - Korgrue

我的HTML结构不同。我无法更改HTML和CSS。 - Sirwan Afifi