JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div id="menu">
    <div id="serra-top"></div>
    <div id="conteudomenu">
meu menu        
    </div>
    <div id="serra-bottom">a</div>
</div>

CSS

body{
    background-color: green;
}
#menu{
    width: 100%;
    height: 100px;
    padding: 10px 0;
}
#serra-top {
    height: 10px;
    background: 
        linear-gradient(315deg, #EC173A 25%, transparent 25%) 0 10px, 
        linear-gradient( 45deg, #EC173A 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: transparent;
}
#serra-bottom {
    height: 10px;
    background: 
        linear-gradient(135deg, #EC173A 25%, transparent 25%) -50px 0,
        linear-gradient(225deg, #EC173A 25%, transparent 25%) -50px 0,
        linear-gradient(315deg, #EC173A 25%, transparent 25%),
        linear-gradient(45deg, #EC173A 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: transparent;
}
#menu #conteudomenu{
    background-color: #EC173A;
    height: 100px;
}