CSSでメールアイコンを作成する

以下が全貌です

https://codepen.io/mackxxx3/pen/GRRyEod

部分的なところ

https://codepen.io/mackxxx3/pen/XWWLQrG

.form::before{
  content: "";
  display: block;
  width:50px;
  height:50px;
  background-color: white;
  position: absolute;
  left: 24px;
  top: 1px;
  z-index: 1;
}

.form__title{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 50px;
  position: relative;
  top:30px;
  left: 70px;
}

.form__title::before{
  content: "";
  display: block;
  width: 30px;
  height: 20px;
  position: absolute;
  border: solid 2px black;
  left: -45px;

}

.form__title::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  border: solid 2px black;
  left: -45px;
  top: -25px;
  transform: rotate(45deg);
}

方針

四角形の枠を組み合わせ、枠外のところをwhiteで塗りつぶすという 方針で書くとメールアイコンが作成できました。