大佬教程收集整理的这篇文章主要介绍了尖尖的叶子形状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; }
谢谢
即使你是新手,也不要害怕,它并不像它看起来那么难.
你总是可以在线使用一个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,leftand旋转.
这是最终结果：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,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,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,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,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,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,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,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,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div>
以上是大佬教程为你收集整理的尖尖的叶子形状CSS全部内容，希望文章能够帮你解决尖尖的叶子形状CSS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。