javascript - 创建一个像圆圈一样的披萨

Question

有没有办法使用 JavaScript 或 CSS3 创建一个缺少部分的圆圈，如图片？

Answer 1

实现这种形状的另一种方法是在圆的顶部使用伪元素，倾斜变换元素并将其定位，就像从圆中切出一个扇区一样。改变倾斜变换的角度可以使扇区看起来更大或更小（将样本悬停在片段中以查看它的实际效果）。

请注意，这仅适用于切割四分之一圆。如果您需要切割更多，则需要额外的伪元素。此外，伪元素具有白色背景，因此当页面背景不是纯色时无法使用。

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

---

如果需要透明切割，您可以使用以下任一选项：

1. 两个按所需角度旋转的半圆形伪元素- 半圆形实际上是圆形，其背景颜色仅使用渐变的一半高度应用。修改旋转角度会导致扇区大小不同。

.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 路径- 使用 SVG 创建路径并填充所需的背景颜色。路径的计算逻辑在代码片段的 JS 部分作为注释进行了详细说明。

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

Answer 2

请在下面找到代码。

#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; 
}

另一种解决方案是使用两个形状，首先创建一个圆形，然后在其上放置一个窄三角形（使三角形的颜色为白色，圆形为绿色），对于一个窄三角形，您可以使用此代码

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

对于圈子，您可以使用它

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

Answer 3

Canvas 可以在现代浏览器中为您提供帮助。

Answer 4

您可以使用conic-gradient

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

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

或将其用作掩码：

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