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.

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

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>

Fiddle