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

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

可以使用线性梯度来完成。与其专注于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 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>

希望在CSS中创建45度饼图

4 个答案: