<div class="clover">
  <div class="shamrock">
    <div class="leafOne"></div>
    <div class="leafTwo"></div>
    <div class="leafThree"></div>
    <div class="stalk"></div>
    </div>
</div>

body {
  background-color: #cbf3f0;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.clover {
  position: relative;
}

.shamrock {
  position: realtive;
  transform: rotate(-20deg);
}

.leafOne, .leafTwo, .leafThree {
  position: absolute;
  width:40px;
  height: 40px;
  background-color:#55a630;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
  box-shadow: inset 2px 2px #2b9348;
}

.leafOne {
  top:5px;
  left:8px;
}

.leafOne:before, .leafTwo:before, .leafThree:before {
  content:"";
  position: absolute;
  width:40px;
  height: 40px;
  background-color:#55a630;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
  top:-18px;
  transform: rotate(50deg);
  left:-7px;
}

.leafTwo {
  transform: rotate(110deg);
  top:-40px;
  left:20px;
}

.leafThree {
  top:-10px;
  left:55px;
  transform: rotate(-130deg);
}

.stalk {
  z-index:-1;
  position: absolute;
  width:50px;
	height:45px;
	border-top:6px solid #2b9348;
	border-left:12px solid #2b9348;
	border-top-left-radius:100px;
  left:35px;
  top:25px;
  transform: rotate(-80deg);
}

.stalk:before {
  content:"";
  position: absolute;
  background-color:#55a630;
  width:20px;
  height:20px;
  top:-20px;
  left:50px;
}