我正在尝试在CSS中创建一个尖叶形状,如图像
http://i.imgur.com/KoN0PGo.jpg.我设法想出了一种创建默认叶形的方法,但在找到如何创建尖角时有一些问题.我只想找到创建一半叶子的方法,因为我打算绘制图像来为它设置动画,并且每一半叶子都是独立的.有没有办法使用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;
}
谢谢
解决方法
正如其他用户告诉你的那样……用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,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>
