Pentagon shape in notification

Can someone help me in attaching pentagon shape in email notification.
I am using this but getting only rectangle in mail.

{{_("New Mail ")}}

.hi{ width: 200px; height: 200px; background: green; position: relative

}
.hi:before{
content: ‘’;
position: absolute;
top: 0;
left: 100%;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 50px solid green;
}

CUSTOMER NAME: {{ doc.customer }}

CUSTOMER NAME: {{ doc.cust_name }}

Invoice No.: {{ doc.invoice_no }}

Status: {{ doc.status }}