柠檬形状（CSS 和 HTML）

Question

这就是我想要的形状。用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;
}

Answer 1

您应该为不同的角使用不同的边框半径。此外，添加 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;
}

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

奖金

带树枝和叶子的柠檬。

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>

Answer 2

这对于底部边缘有一个伪元素是非常微不足道的：

.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).

Answer 3

柠檬和树叶

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>

柠檬形状（CSS 和 HTML）

Lemon shape (CSS and HTML)

html

css

css-shapes

奖金