柠檬形状（CSS 和 HTML）答案

【问题标题】：Lemon shape (CSS and HTML)柠檬形状（CSS 和 HTML）
【发布时间】：2019-09-25 07:16:50
【问题描述】：

这是我想要的形状。可以用 CSS 完成吗？我创建了一个圈子。这里：

_{（来源：pngimg.com）}

<div class="lemon"></div>

CSS :-

.lemon {
   width: 200px; 
   height: 200px;
   background-color: #FFFA40;
   border: 4px solid #FFF150;  
   border-radius: 100px;
   top:20px;
}

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

柠檬和树叶

body {
  background: rgb(48, 52, 52)
}
.container {
  margin: 0 auto;
  width: 200px;
  position: relative;
}
.leaves {
  width: 7px;
  height: 70px;
  background: #339B00;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  z-index: 1;
}
.leaves:after {
  content: '';
  width: 80px;
  height: 80px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(96deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.leaves:before {
  content: '';
  width: 70px;
  left: 8px;
  height: 70px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(-16deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.lemon {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: yellow;
  position: absolute;
  transform: rotate(48deg) skew(6deg, 6deg);
  top: 69px;
  left: 50%;
  margin-left: -80px;
}
.lemon:after {
  content: '';
  width: 50px;
  height: 50px;
  background: yellow;
  top: 64%;
  left: 50%;
  position: absolute;
  margin-left: 24px;
  border-radius: 19px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="leaves"></div>
  <div class="lemon"></div>
</div>

【讨论】：

【解决方案2】：

您应该为不同的角使用不同的边框半径。另外，添加transform: rotate(45deg); 以将其旋转45deg。

.lemon {
   width: 200px; 
   height: 200px;
   background-color: #FFFA40;
   border: 4px solid #FFF150;  
   border-radius: 20px 140px 40px 140px;  /* top right bottom left */
   transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   position:relative;
   top:30px;
}

&lt;div class="lemon"&gt;&lt;/div&gt;

奖金

一个带有树枝和叶子的柠檬。

body {
   background-color:#333;
}
.lemon {
   width: 200px; 
   height: 200px;
   background-color: #FFFA40;
   border: 4px solid #FFF150;  
   border-radius: 20px 140px 40px 140px;
   transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   position:relative;
   top:145px;
   z-index:1;
}
.leaf {
   width: 100px; 
   height: 100px;
   background: #11AA11;     
   border-radius: 5px 100px;
   transform:rotate(105deg);
   -webkit-transform:rotate(105deg);
   -moz-transform:rotate(105deg);
   position:relative;
   top:-200px;
   left:110px;
   z-index:3;
}
.twig{
   width: 7px; 
   height: 0px;
   border-bottom: 90px solid #A0522D;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
   border-bottom-right-radius:4px;
   border-bottom-left-radius:4px;
   transform:rotate(-10deg);
   position:relative;
   top:-284px;
   left:88px;
   z-index:2;
}

<div class="lemon"></div>
<div class="leaf"></div>
<div class="twig"></div>

【讨论】：

@chipChocolate.py 实际上它更类似于 OP。只有边框半径部分与您的链接相似

【解决方案3】：

这对于底部边缘的伪元素来说非常简单：

.lemon {
    background:yellow;
    width:200px;
    height:150px;
    border-radius:50%;
    position:relative;
}
.lemon:after {
    content:'';
    position:absolute;
    left:85%;
    top:40%;
    background:yellow;
    width:25%;
    height:20%;
    border-radius:50%;
}

Sample fiddle here。显然，您可以将其旋转到您想要的任何位置，即。 transform:rotate(90deg).

【讨论】：