希望在 CSS 中创建 45 度饼图切片

Question

我希望从这个 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

目前支持不佳(仅限 Chrome(，但 CSS Level 4conic-gradient可以做到这一点......或使用填充材料。

仅限铬演示。

.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>

Answer 4

试试这个 添加了一些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>