looking to create a 45 degree pie slice in css

Question

I am looking to achieve a 45 degree angle pie slice from this 90 degree angle slice. I want to keep the starting point of the curve at the bottom left.

The code I have is as follows:

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

you will ned completly different code. you can not achieve this by modifying the numbers in your sample — Philipp Sander, Oct 18 '18 at 11:21
It requires minor changes to your HTML, but take a look at this: https://stackoverflow.com/a/14185845/1650337 — DBS, Oct 18 '18 at 11:37

score 2 · Accepted Answer · answered Oct 18 '18 at 11:40

2

It can be done using linear-gradient. Instead of focusing on the 45deg slice, think it other way around.

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

Check the JS fiddle: http://jsfiddle.net/eL1jsm20/2/

answered Oct 18 '18 at 11:40

Rahul Gandhi

1,035
1
11
24

does this support all browsers? – Viira Oct 18 '18 at 11:46
1

Thanks I was able to use this – Matt Jameson Oct 18 '18 at 11:57
@Viira It has good browser support, even supported on IE10. https://caniuse.com/#search=linear-gradient – Rahul Gandhi Oct 18 '18 at 16:08
@gandhi_rahul that's cool – Viira Oct 20 '18 at 05:34

score 1 · Answer 2 · answered Oct 18 '18 at 11:39

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

Paulie_D · Answer 3 · 2018-10-18T12:07:22.860

0

Poorly supported at present (Chrome only) but CSS Level 4 conic-gradient can do that...or use a polyfill.

Chrome only demo.

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

edited Oct 18 '18 at 12:07

answered Oct 18 '18 at 11:28

Paulie_D

107,962
13
142
161

score 0 · Answer 4 · edited Oct 20 '18 at 05:36

Try this Added some before tricks

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

looking to create a 45 degree pie slice in css

4 Answers4