javascript - 创建一个像圆形的披萨

Question

有什么方法可以使用 JavaScript 或 CSS3 创建一个像图片一样缺少部分的圆圈？

Answer 1

另一种实现此形状的方法是在圆的顶部使用伪元素，倾斜变换元素并将其定位为从圆中切出一个扇形。改变倾斜变换的 Angular 可以使扇区看起来更大或更小(将示例悬停在片段中以查看实际效果)。

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

.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。两个按所需 Angular 旋转的半圆形伪元素 - 半圆实际上是使用渐变仅将背景颜色应用于其高度的一半的圆。修改旋转 Angular 会导致不同大小的扇区。

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