EN VI

How to cut 1/n from a circle in css?

2024-03-10 23:30:05
How to cut 1/n from a circle in css?

enter image description here

How to make such a shape in CSS? In Figma it is called arc/sweep. The maximum that I found was an implementation through polygon overlays, but I can’t implement it. It seems like a simple task, but two days of research led to nothing.

Solution:

Based on this answer, here it is:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #433f3f;
}

.pacman {
  width: 495px;
  height: 495px;
  background: #d9d9d9;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 50%, 50% 50%, 85.5% 0%);
  border-radius: 50%;
}
<div class="pacman"></div>

Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login