CSS
.msg, .main, .box {
width: 300px;
height: 300px;
-webkit-clip-path: polygon(0% 18%, 50% 0%, 100% 18%, 85% 85%, 50% 100%, 15% 85%);
clip-path: polygon(0% 18%, 50% 0%, 100% 18%, 85% 85%, 50% 100%, 15% 85%);
}
body {
overflow: hidden;
background: #333;
}
.main {
padding: 10px;
background: #b1b1b1;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.box {
position: relative;
background: #dd0031;
}
.fade {
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: rgba(56, 5, 17, 0.3);
z-index: 2;
}
h3 {
position: absolute;
top: -100%;
text-align: center;
left: 7px;
right: 0;
color: white;
font-size: 286px;
font-family: sans-serif;
font-weight: lighter;
z-index: 1;
}
