尖叶形状
Pointy leaf shape
我正在尝试在 CSS 中创建尖叶形状，如图所示：
我设法找到了一种创建默认叶子形状的方法，但在寻找如何创建尖角时遇到了一些问题。我只是在寻找创建一半叶子的方法，因为我打算绘制图像以使其具有动画效果，并且每一半叶子都是独立的。有没有办法使用 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 是一项技术，其主要目标是将样式信息与内容 (HTML) 和行为（脚本服务器和客户端）分离。
当然，它允许您制作一些漂亮且非常流畅的动画（称为过渡），主要用于在不同状态之间转换元素，但这并不意味着它有能力或适合形状绘制或动画。
尽管如此，有人致力于此并取得了显着进展，但恕我直言，这不是解决问题的理想方法。检查，例如：
https://www.css-tricks.com/examples/ShapesOfCSS/
SVG 和 HTML5 Canvas 是专为矢量图形开发而设计的技术。它们就是为此而设计的，它们高效、强大且标准，与您尝试使用不适合该问题的技术相比，它们可以让您更快、更好地满足您的需求。
它们绝对是您要走的路。
CSS
这是一件非常困难的事情，我几乎肯定会建议您在 SVG 中进行。
但是正如您在 CSS 中所要求的那样，并且在某些方面在 CSS 中是可行的（尽管设计有点偏离），我将展示一个可能的 CSS方式，让您根据自己的喜好对其进行编辑，同时处理 SVG 答案。
这使用定位和变换将元素旋转到位。
.container {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
}
.leaf {
position: absolute;
width: 30px;
height: 100px;
top: 25px;
left: calc(50% - 15px);
transition: all 0.2s ease;
}
.leaf:hover {
width: 34px;
left: calc(50% - 17px);
}
.leaf:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 100%;
background: red;
border-radius: 15px 0 0 15px / 50px 0 0 50px;
}
.leaf:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 100%;
background: red;
border-radius: 0 15px 15px 0 / 0 50px 50px 0;
}
.leaf:nth-child(1) {
transform-origin: 0% 150%;
transform: rotate(-90deg);
}
.leaf:nth-child(2) {
transform-origin: 0% 150%;
transform: rotate(-45deg);
}
.leaf:nth-child(3) {
transform-origin: 100% 150%;
transform: rotate(45deg);
}
.leaf:nth-child(5) {
transform-origin: 100% 150%;
transform: rotate(90deg);
}
<div class="container">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
正如其他用户告诉您的那样...这是一个很难用 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>
你可以稍微改变形状来改变初始的边界半径值，背景渐变也可以帮助画线：
我知道这不是答案，只需查看 css 选项（对于 bg 渐变，请查找 bg 图案以了解更多信息）它可以避免将 SVG 用于基本形状或图案。
body {
padding: 1em;
}
.leaf {
width: 80px;
height: 140px;
background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
-moz-border-radius: 100% /120px 0px;
-webkit-border-radius: 100% / 120px 0px;
border-radius: 100% 0 / 140px 0px;
}
<div class="leaf"></div>
3 片叶子可能是
body {
padding: 1em;
}
.leaf, .leaf:last-of-type {
box-shadow: -1px 1px 2px #835d46;
width: 80px;
height: 140px;
background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
-moz-border-radius: 100% /120px 0px;
-webkit-border-radius: 100% / 120px 0px;
border-radius: 100% 0 / 140px 0px;
display:inline-block;
transform:rotate(15deg);
margin:0 -0.5em;
}
.leaf:first-of-type {
background-image: linear-gradient(to top right, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
border-radius: 0 100% /0 140px ;
transform:rotate(-15deg);
}
.leaf:first-child + .leaf {
transform:rotate(-29deg);
vertical-align:1.3em;
margin:0 -1em;
}
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
我正在尝试在 CSS 中创建尖叶形状，如图所示：
我设法找到了一种创建默认叶子形状的方法，但在寻找如何创建尖角时遇到了一些问题。我只是在寻找创建一半叶子的方法，因为我打算绘制图像以使其具有动画效果，并且每一半叶子都是独立的。有没有办法使用 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 是一项技术，其主要目标是将样式信息与内容 (HTML) 和行为（脚本服务器和客户端）分离。
当然，它允许您制作一些漂亮且非常流畅的动画（称为过渡），主要用于在不同状态之间转换元素，但这并不意味着它有能力或适合形状绘制或动画。
尽管如此，有人致力于此并取得了显着进展，但恕我直言，这不是解决问题的理想方法。检查，例如： https://www.css-tricks.com/examples/ShapesOfCSS/
SVG 和 HTML5 Canvas 是专为矢量图形开发而设计的技术。它们就是为此而设计的，它们高效、强大且标准，与您尝试使用不适合该问题的技术相比，它们可以让您更快、更好地满足您的需求。
它们绝对是您要走的路。
CSS
这是一件非常困难的事情，我几乎肯定会建议您在 SVG 中进行。
但是正如您在 CSS 中所要求的那样，并且在某些方面在 CSS 中是可行的（尽管设计有点偏离），我将展示一个可能的 CSS方式，让您根据自己的喜好对其进行编辑，同时处理 SVG 答案。
这使用定位和变换将元素旋转到位。
.container {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
}
.leaf {
position: absolute;
width: 30px;
height: 100px;
top: 25px;
left: calc(50% - 15px);
transition: all 0.2s ease;
}
.leaf:hover {
width: 34px;
left: calc(50% - 17px);
}
.leaf:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 100%;
background: red;
border-radius: 15px 0 0 15px / 50px 0 0 50px;
}
.leaf:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 100%;
background: red;
border-radius: 0 15px 15px 0 / 0 50px 50px 0;
}
.leaf:nth-child(1) {
transform-origin: 0% 150%;
transform: rotate(-90deg);
}
.leaf:nth-child(2) {
transform-origin: 0% 150%;
transform: rotate(-45deg);
}
.leaf:nth-child(3) {
transform-origin: 100% 150%;
transform: rotate(45deg);
}
.leaf:nth-child(5) {
transform-origin: 100% 150%;
transform: rotate(90deg);
}
<div class="container">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
正如其他用户告诉您的那样...这是一个很难用 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>
你可以稍微改变形状来改变初始的边界半径值，背景渐变也可以帮助画线：
我知道这不是答案，只需查看 css 选项（对于 bg 渐变，请查找 bg 图案以了解更多信息）它可以避免将 SVG 用于基本形状或图案。
body {
padding: 1em;
}
.leaf {
width: 80px;
height: 140px;
background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
-moz-border-radius: 100% /120px 0px;
-webkit-border-radius: 100% / 120px 0px;
border-radius: 100% 0 / 140px 0px;
}
<div class="leaf"></div>
3 片叶子可能是
body {
padding: 1em;
}
.leaf, .leaf:last-of-type {
box-shadow: -1px 1px 2px #835d46;
width: 80px;
height: 140px;
background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
-moz-border-radius: 100% /120px 0px;
-webkit-border-radius: 100% / 120px 0px;
border-radius: 100% 0 / 140px 0px;
display:inline-block;
transform:rotate(15deg);
margin:0 -0.5em;
}
.leaf:first-of-type {
background-image: linear-gradient(to top right, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%);
border-radius: 0 100% /0 140px ;
transform:rotate(-15deg);
}
.leaf:first-child + .leaf {
transform:rotate(-29deg);
vertical-align:1.3em;
margin:0 -1em;
}
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>