Search code examples
csscss-shapes

Pointy leaf shape

I am trying to create a pointy leaf shape in CSS, as in the image:

I managed to figure out a way to create a default leaf shape, but have some issues in finding out how to create the pointy corners. I am only looking for ways of creating half of the leaf, as I intend to draw the image to animate it, and each half of the leaves will be independent. Is there a way to create that shape using CSS?

Default leaf shape: 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;
}
Solution

  • As the others user have told you... that is a very difficult shape to be done with CSS's. SVG is the way to go.

    Even if you are new to it don't be afraid, it's not as hard as it looks.

    You could always use a svg generator online (plenty around) to create the shape that will be repeated many times. For this example I have use this generator online to get this code:

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

    Notice, please, this is a rough shape. I did it in a few seconds and for your project you may need to spend a bit more time to make the shape better.

    Then I have just put the code into a container, duplicate it 7 times, and absolute positioned every container with top, leftand rotate.

    And this is the final result: 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>