<div id="wrap">
<div class="centerer">
<div id="menu">
<div id="logo">
<div id="logo-image"></div>
</div>
</div>
</div>
</div>
// autoprefixer: true
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fff;
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.centerer {
width: 100%;
padding: 20px;
max-width: 1200px;
margin: auto;
}
#menu {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99;
height: 80px;
&::before {
content: '';
display: block;
position: absolute;
z-index: 0;
bottom: -26px;
left: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #ddd;
border: 4px solid #a32929;
}
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: #ddd;
border-bottom: 4px solid #a32929;
}
}
#logo {
width: 80px;
height: 80px;
border-radius: 50%;
background: #ddd;
position: relative;
z-index: 2;
top: 22px;
left: 24px;
&-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
background: #a32929;
}
}
View Compiled
This Pen doesn't use any external CSS resources.