Mail icon using HTML and CSS - html

Question

I'm trying to create an email icon in CSS. Is this the right way to code as UI or Front-end Developer?
Check out my Codepen here.
.container {
border-left: 10px solid #80BD9E;
border-right: 10px solid #80BD9E;
background: #F98886;
height: 500px;
width: 500px;
margin: 10% auto;
border-radius: 6px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 254px solid transparent;
border-top: 250px solid #80BD9E;
}
.arrow-down1 {
top:22%;
left:25.5%;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 254px solid transparent;
position: absolute;
border-top: 250px solid #f98886;
border-radius:6px;
}
.topLayer {
background: #fff;
position: absolute;
width: 505px;
height: 100px;
margin-left: 24.5%;
margin-top: -9.9%;
z-index: 1;
}
<div class="topLayer">
</div>
<div class="container">
<div class="arrow-down">
<div class="arrow-down1">
</div>
</div>
</div>

Answer 1

Try this. I needed it to embed in an email because imaging is so restrictive:
check it out in action (jsfiddle)
SCSS: size should scale and color will change with a change of the variables
$mail-size: 50;
$letter-color: white;
$letter-accent-color: gray;
.container{
border: $mail-size * .06 + px solid $letter-accent-color;
background-color: $letter-color;
height: $mail-size * 1.4 + px;
width: $mail-size * 2 + px;
border-radius:6px;
}
.arrow-down {
border-left: $mail-size + px solid transparent;
border-right: $mail-size + px solid transparent;
border-top: $mail-size + px solid $letter-accent-color;
}
.arrow-down1 {
margin-top:-$mail-size * 1.008 + px;
margin-left: -$mail-size * .92 + px;
border-left: $mail-size * .92 + px solid transparent;
border-right: $mail-size * .92 + px solid transparent;
border-top: $mail-size * .92 + px solid $letter-color;
border-radius:0px;
}
html
<div class="container">
<div class="arrow-down">
<div class="arrow-down1">
</div>
</div>
</div>
as it turns out, this will not work in email templates either lol

Answer 2

Cool to see that you're trying to be creative with html&css. Like suggested before me it is probebly best/easiest to just use fontAwesome, Material Icons or Bootstrap Icons.
But if you do make icons yourself try to use a 'container-div' with position: relative and all the elements of your icon position: absolute. Right now the email does not render the right way:

Answer 3

Delete the third box. After that this looks fine.
.container {
border-left: 10px solid #80BD9E;
border-right: 10px solid #80BD9E;
background: #F98886;
height: 500px;
width: 500px;
margin: 10% auto;
border-radius: 6px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 254px solid transparent;
border-top: 250px solid #80BD9E;
}
.topLayer {
background: #fff;
position: absolute;
width: 505px;
height: 100px;
margin-left: 24.5%;
margin-top: -9.9%;
z-index: 1;
}
<div class="topLayer">
<div class="container">
<div class="arrow-down">
</div>
</div>
</div>
But it's easier to use Font Awesome: http://fontawesome.io/