JSFiddle - React, Tailwind, and code Playground

by evankennedy

HTML

<div id="nav">
    <div id="logo">
        <img src="http://www.propcott.com/images/logo-mobile-header.png">
    </div>
</div>

CSS

body {
    margin: 0;
}
#nav {
    background: #777;
    padding: 0 20px;
    box-shadow: 0 1px 3px -2px;
}
#logo {
    position: relative;
    display: inline-block;
    background: #eee;
    padding: 10px;
}
#logo img {
    vertical-align: top;
}
#logo:before, #logo:after {
    position: absolute;
    top: 0;
    content: '';
    display: inline-block;
}
#logo:before {
    right: 100%;
    border-bottom: 52px solid white;
    border-left: 15px solid transparent;
}
#logo:after {
    left: 100%;
    border-top: 52px solid white;
    border-right: 15px solid transparent;
}