.wrap {
position: relative;
}
.mark {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.mark:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 25px;
z-index: 1;
border-color: rgba(206, 3, 5, .7) transparent transparent rgba(206, 3, 5, .7);
}
.hong {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
color: #FFF;
display: inline-block;
position: absolute;
top: 5px;
left: 0;
z-index: 1;
font-size: 20px;
text-transform: uppercase;
width: 25px;
text-align: center;
}
.hei {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
color: #1f4977;
display: inline-block;
position: absolute;
top: 5px;
left: 0;
z-index: 1;
font-size: 20px;
text-transform: uppercase;
width: 25px;
text-align: center;
}