CSS Clover/ Shamrock - Lena Design

In a few days is St. Patrick’s Day! Shamrock symbolizes St. Patrick’s Day and means “young clover”. Ireland’s patron saint is said to have used it as a metaphor for the Christian Holy Trinity, which is God the Father, God the Son, and God the Holy Spirit….. and because shamrock is green, people eventually started wearing green on St. Patrick’s Day.

Demo:

*to see CSS shamrock on the website click here.

To create the CSS Clover follow the steps below and watch the video tutorial:

Step1.

Add HTML

Create the container, add three leaves and the stalk:

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

Step2.

Add CSS

Set the colour and the position of the background and the elements:

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

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

Style the leaves using the border-radius property:


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

Add the stalk to the clover:

.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;
}

To see the CSS Clover on the website click here.

Watch also the video tutorial: