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?

Answer 1

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>