css - 尖叶形状

Question

我正尝试在 CSS 中创建一个尖叶形状，如图所示:

我设法想出了一种创建默认叶子形状的方法，但在找出如何创建尖 Angular 方面遇到了一些问题。我只是在寻找创建一半叶子的方法，因为我打算绘制图像以使其具有动画效果，并且每一半叶子都是独立的。有没有一种方法可以使用 CSS 创建该形状？

默认叶形:https://jsfiddle.net/xwvyo1c5/

.leaf { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 100px 0px;
  -webkit-border-radius: 100px 0px;
  border-radius: 100px 0px;
}

Answer 1

正如其他用户告诉您的那样...这是一个很难用 CSS 完成的形状。 SVG 是必经之路。

即使您是新手也不要害怕，它并不像看起来那么难。

您总是可以在线使用 svg 生成器(周围有很多)来创建将重复多次的形状。对于这个例子，我使用了 this生成器在线获取此代码:

<svg  xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
 <g stroke="null">
  <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"/>
 </g>
</svg>  

请注意，这是一个粗略的形状。我在几秒钟内就完成了，对于您的元素，您可能需要多花一点时间来使形状更好。

然后我将代码放入一个容器中，复制它 7 次，并使用 top、left 和 rotate 绝对定位每个容器>。

这是最终结果: JSFIDDLE

.leaf1 {
  position: absolute;
  top: 100px;
  left: 0;
}
.leaf2 {
  position: absolute;
  top: 100px;
  left: 200px;
}
.leaf3 {
  position: absolute;
  top: 135px;
  left: 83px;
  transform: rotate(-90deg);
}
.leaf4 {
  position: absolute;
  top: 18px;
  left: 233px;
  transform: rotate(90deg);
}
.leaf5 {
  position: absolute;
  top: 11px;
  left: 99px;
  transform: rotate(45deg);
}
.leaf6 {
  position: absolute;
  top: 199px;
  left: 75px;
  transform: rotate(-135deg);
}
.leaf7 {
  position: absolute;
  top: 115px;
  left: 324px;
  transform: rotate(135deg);
}
.leaf8 {
  position: absolute;
  top: 91px;
  left: 136px;
  transform: rotate(-45deg);
}

<div class="leaf1">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf2">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf3">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf4">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf5">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf6">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf7">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>
<div class="leaf8">
  <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null">
    <g stroke="null">
      <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"
      />
    </g>
  </svg>
</div>