那些遇到过的问题

尖尖的叶形CSS

lol*_*eck 7 css css3 css-shapes

我正在尝试在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;
}
Run Code Online (Sandbox Code Playgroud)

谢谢

Alv*_*dez 8

正如其他用户告诉你的那样......用CSS完成这是一个非常困难的形状.SVG是要走的路.

即使你是新手,也不要害怕,它并不像它看起来那么难.

你总是可以在网上使用一个svg生成器(很多)来创建将重复多次的形状.对于此示例,我在线使用此生成器来获取此代码:

<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>
Run Code Online (Sandbox Code Playgroud)

请注意,这是一个粗略的形状.我在几秒钟内完成了它,对于你的项目,你可能需要花费更多的时间来改善形状.

然后我将代码放入容器中,复制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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

G-C*_*Cyr 7

您可以稍微更改形状以改变初始边框半径值，背景渐变也可以帮助绘制线条：

我知道这不是答案，只需查看 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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="leaf"></div>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3793 次

最近记录：

9 年，10 月 前
双曲线形状 20
更多相关链接
相关归档
在呈现网页之前等待加载字体 55
Internet Explorer中的渐变颜色 49
以正确的方式重新学习CSS 43
如何向 nextjs 元素添加多个 className 41
CSS:如何从中心而不是左上角缩放图像 17
Google Chrome无法在3d转换后的元素上应用不透明度转换 11
如何在html中为框创建内边框？ 7
用css在图像内的曲线 7
CSS 3D变换角度问题 5
为什么应用于<td>覆盖样式的样式应用于其父<tr>？ 2
难疑归档
如何重命名本地Git分支？ 8033
如何查看远程Git分支？ 6408
什么是智能指针,什么时候应该使用？ 1730
如何删除GitHub上的提交？ 1619
如何比较两个不同分支的文件？ 1430
MVC和MVVM有什么区别？ 1275
performSelector可能导致泄漏,因为其选择器未知 1251
有没有办法从APK文件中获取源代码？ 1218
检查jQuery中是否存在元素 1209
命名类 - 如何避免将所有内容称为"<WhatEver> Manager"？ 1147