<div class="outer-sqr">
<div class="md-sqr">
<div class="circle"></div>
</div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #222730;
margin: 0
}
.outer-sqr {
display: flex;
justify-content:center;
width: 400px;
height: 150px;
background: #4CAAB3
}
.md-sqr {
display: flex;
align-items: center;
justify-content: center;
background: #4CAAB3;
width: 150px;
height: 150px;
transform: rotate(45deg);
box-shadow: #222730 0 0 0 50px
}
.circle {
width: 50px;
height: 50px;
background: #393E46;
border-radius: 50%
}
</style>