<div class="hashnode"></div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url('https://images.pexels.com/photos/1704120/pexels-photo-1704120.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500') no-repeat center center;
  background-size: cover;
}
.hashnode {
  width: 5em;
  height: 5em;
  border-radius: 1.25em;
  background: #2962ff;
  transform: rotate(45deg);
  -webkit-mask: radial-gradient(#0000 28%, #000 28%);
  mask: radial-gradient(#0000 28%, #000 28%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.