JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
</div>
<div class="img">
    <img src="http://findicons.com/files/icons/1036/function/48/warning.png" />
</div>

CSS

.nav {
     padding: 20px;
     border-bottom: 2px solid black;
     position: relative;
     z-index: 1;  
}

.img {
   position: relative;  
   z-index: 2;
}

.img:after {
     content:'';
     position: absolute;
     height: 2px;
     width: 40px;
     background: #fff;
     top: -2px;
     left: 50%;
     margin-left: -20px;  
    z-index: 1;
}

.img img {
     position: absolute;
     top: -20px;
     left: 50%;
      margin-left: -24px; 
    z-index: 2;
}