希望在css中创建一个45度的扇形切片[重复]

Question

这个问题在这里已有答案：

• Multi-coloured circular div using background colours? 7个答案

我期待从这个90度角切片获得45度角饼图。我想保持曲线的起点在左下角。

我的代码如下：

.quarter-circle{
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  -webkit-border-radius: 100px 0 0 0;
}

<div class="quarter-circle"></div>

http://jsfiddle.net/5etm63fg/

Answer 1

它可以使用线性梯度完成。而不是专注于45度切片，而是反思。

.quarter-circle{
     width: 300px;
     height: 300px;
     background: orange;
     border-radius: 50%;
     background-image: linear-gradient(0deg, white 50%, transparent 50%), linear-gradient(45deg, transparent 50%, white 50%);
}

<div class="quarter-circle"></div>

检查JS小提琴：http://jsfiddle.net/eL1jsm20/2/

Answer 2

.eight-circle {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.eight-circle:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: orange;
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  -webkit-border-radius: 100px 0 0 0;
  transform: rotate(-45deg);
  transform-origin: 100% 100px;
}

<div class="eight-circle"></div>

Answer 3

试试这个添加了一些before技巧

.quarter-circle{
     width: 100px;
     height: 100px;
     background: orange;
     border-radius: 100px 0 0 0;
     -moz-border-radius: 100px 0 0 0;
     -webkit-border-radius: 100px 0 0 0;
     transform: rotate(90deg);
     position:relative;
     
}

.quarter-circle::after{
content:""; 
position:absolute; 
border:39px solid #fff; 
left:0; 
top:0; 
border-color:transparent #fff; 
border-width:100px 0 0 100px;
}

<div class="quarter-circle"></div>

Answer 4

Poorly supported目前（仅限Chrome）但CSS Level 4 conic-gradient可以做到这一点......或者使用polyfill。

Chrome仅限演示版。

.quarter-circle {
  width: 300px;
  height: 300px;
  background: conic-gradient(transparent 75%, orange 75%, orange 87.5%, transparent 87.5%);
  border-radius: 50%;
  margin: 1em auto;
}

<div class="quarter-circle"></div>