Updated Gmail icon

CSS Bro!

by Joshua Powell

HTML

<span class="gmailBody">
    <span class="topTri"></span>
    <span class="backsh"></span>
    <span class="leftTri"></span>
    <span class="rightTri"></span>
    <span class="rightShadow"></span>
    <span class="bottomTri"></span>
</span>

CSS

html {
    background: #9b9b9b;
}

.gmailBody {
    background: #e25247;
    width: 70px;
    height: 48px;
    display: block;
    border-radius: 6px;
    margin: 50px auto;
    position: relative;
    box-shadow: 0 2px 3px #2b2b2b;
    overflow: hidden;
    cursor: pointer;
}

.gmailBody:hover {
    background: #c94237;
}

.backsh {
    width: 54px;
    height: 18px;
    background: #9b9b9b;
    display: block;
    margin: 30px 0 0 8px;
    position: absolute;
}

.topTri {
    height: 0;
    width: 0;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 18px solid #eeece0;
    position: absolute;
    display: block;
    margin-left: 3px
}

.leftTri {
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-bottom: 19px solid transparent;
    border-left: 27px solid #eeece0;
    position: absolute;
    display: block;
    margin: 15px 0 0 8px;
}

.rightTri {
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-bottom: 19px solid transparent;
    border-right: 27px solid #eeece0;
    position: absolute;
    display: block;
    margin: 15px 0 0 35px;
}

.rightShadow {
    height: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 36px solid rgba(0, 0, 0, 0.3);
    position: absolute;
    display: block;
    margin: 10px 0 0 35px;
}

.bottomTri {
    height: 0;
    width: 0;
    border-right: 27px solid transparent;
    border-left: 27px solid transparent;
    border-bottom: 19px solid #eeece0;
    position: absolute;
    display: block;
    margin: 31px 0 0 8px;
}