Mail icon using HTML and CSS-ThrowExceptions

Exception or error:

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>
How to solve:

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:
enter image description here

###

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/

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *