创建像圆圈一样的披萨

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可以在现代浏览器中为您提供帮助。