mail icon

Copyrighted

by jshacker

HTML

<div class="flex">

<div class="icon mail w0"></div>
<div class="icon mail w2"></div>

<div class="icon mail w0 round"></div>
<div class="icon mail w2 round"></div>

</div>

CSS

.flex {
  display: flex;
  gap: 4rem;
}

.icon.mail {
  border-width: 100px;
  border-color: #222 #333 #333 #333;
  border-style: solid;
  height: 100px;
  background-color: #333;
  border-bottom: 0;
  border-radius: 40px;
}

.icon.mail.w0 {
  width: 0;
}

.icon.mail.w2 {
  width: 2rem;
}

.icon.mail.round {
  border-radius: 50%;
}