Create a pizza like circle

Question

Is there any way to create a circle with a missing segment like the picture using JavaScript or CSS3?

Drunken

Why do people insist on using CSS for this kind of thing? Why not just use SVG? – Alphabetical

I would suggest you look around for tutorials on how to make pie charts (here's an example) – Carolanncarole

Ok i will i dont need to use css to achieve, but it was only a sugestion – Wellread

Answer 1

Please find code below.

#myshape
     { 
         width: 0px; height: 0px;
         border-right: 60px solid transparent;
         border-top: 60px solid red;
         border-left: 60px solid red;
         border-bottom: 60px solid red;
         border-top-left-radius: 60px;
         border-top-right-radius: 60px; 
        border-bottom-left-radius: 60px; 
        border-bottom-right-radius: 60px; 
}

Another solution would be to use two shapes, first create a circle and then place a narrow triangle on it(make the color of triangle white and circle green), for a narrow triangle you can use this code

.narrowtriangle
{
    width: 0;
    height: 0;
    text-indent: -9999px;
    border-right: 40px solid transparent;
    border-bottom: 100px solid #f09;
    border-left: 150px solid transparent;
}

and for circle you can use this

 #circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Anacreontic

this allows only for 90°/180°/270° cutouts, with also limited orientations of the final shape. It doesn't produce a rather generic cutout like in OPs graphic. – Saccharate

I see unfortunately i need a specific shape so bad =( – Wellread

Answer 2

Another method to achieve this shape is to use a pseudo-element on top of the circle, skew transform the element and position it like it cuts out a sector from the circle. Changing the angles of the skew transformation can make the sector look bigger or smaller (hover the sample in snippet to see it in action).

Note that this will work exactly only for cutting a quarter of the circle. If you need to cut more then extra pseudo-elements would be needed. Also, the pseudo-element has white background and hence cannot be used when the page background is not a solid color.

.pizza {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  padding: 2px;
  background: lightgreen;
  background-clip: content-box;
  overflow: hidden;
}
.pizza:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  border-radius: 0%;
  left: 50%;
  top: -50%;
  background: white;
  transform-origin: left bottom;
  transform: skewY(-15deg) skewX(-30deg);
  transition: all 1s;
}
.pizza:hover:after {
  transform: skewY(-15deg) skewX(-90deg);
}
.illustration:after {
  background: red;

<div class="pizza"></div>


<!-- Illustration -->

<h3>How is it produced?</h3>
<div class="pizza illustration"></div>

---

If a transparent cut is required, you could use either of the following options:

1. Two semi-circular pseudo-elements rotated by the required angles - The semi-circles are actually circles with background color applied only for half of it's height using gradients. Modifying the rotation angles would result in different size of sectors.

.pizza {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.pizza:after,
.pizza:before {
  position: absolute;
  content: '';
  left: 0%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.pizza:before {
  top: 0%;
  background: linear-gradient(lightgreen 50%, transparent 50%);
  transform: rotate(-75deg);
}
.pizza:after {
  bottom: 0%;
  background: linear-gradient(transparent 50%, lightgreen 50%);
  transform: rotate(-15deg);
}
/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="pizza"></div>

2. SVG Path - A path is created using SVG and filled in with the required background color. The calculation logic for the path is explained in detail in the JS section of the snippet as comments.

/* Path calculation logic

Step 1: Calculating points in the circle
--------------------------------------------------------------------------------
x co-ordinate = x co-ordinate of center point + radius * cos(angle in radians)
y co-ordinate = y co-ordinate of center point + radius * sin(angle in radians)

Angle in radians = (Clock-wise angle in degrees * PI) / 180

Angle in Degree = 315 => Radians = 5.497, x = 85.33, y = 14.62

Angle in Degree = 285 => Radians = 4.974, x = 62.93, y = 1.70

---------------------------------------------------------------------------------
Step 2: Calculate relative points for the line l
---------------------------------------------------------------------------------
x1, y1 = 50,50 (starting/center point)
x2, y2 = 85.33, 14.62

Relative position (x2,y2) - (x1,y1) = 35.33, -35.38

---------------------------------------------------------------------------------
Step 3: Calculation end point for arc based on line end position
---------------------------------------------------------------------------------
x1,y1 = 85.33, 14.62 (absolute position of the line end point)
x2,y2 = 62.93, 1.70

End point (x2,y2) - (x1,y1) = -22.4, -12.92

*/

.pizza-vector {
  height: 350px;
  width: 350px;
  border-radius: 50%;
}
svg {
  height: 100%;
  width: 100%;
}
path {
  fill: lightgreen;
}

/* Just for demo */

body{
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class='pizza-vector'>
  <svg viewBox='0 0 110 110'>
    <path d='M 50,50 l 35.33,-35.38 a 50,50 0 1,1 -22.4,-12.92 z' />
  </svg>
</div>

Bogard

Answer 3

You can use conic-gradient

.a {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(green 20deg, transparent 20deg 60deg, green 60deg);
}

<div class="a"></div>

Or use it as mask:

.a {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  --mask: conic-gradient(green 20deg, transparent 20deg 60deg, green 60deg);
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(purple,red);
}

<div class="a"></div>

Krein

Answer 4

Canvas may help you in modern browsers.

Follett