<div id="path">
Я бы сделал при помощи clip-path
</div>
body{
background-color: #e6e6e6e8;
clip-path: url(#path);
clip-path: url(#path);
}
#path{
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgogIDxwYXRoIHN0eWxlPSJzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6LjU7c3Ryb2tlLW9wYWNpdHk6LjI1IiBkPSJNIDAsMCA0LDQgTSAwLDQgNCwwIi8+Cjwvc3ZnPgo=);
width:100px;
height:100px;
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 1em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.