devo-book/pad.html

<style>
.window
{
    position:relative;
    width:500px;
    border:5px solid black;
    padding:20px;
    border-bottom: none;
    box-sizing:border-box;
}
.bar
{
    position:relative;
    bottom:0;
    left:0;
    width:100%;
    height:21px;
    overflow:hidden;
}
.bar.inverted
{
    transform: translateY(16px) scaleY(-1);
}
.bar span
{
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 21px;
    border: 5px solid #000;
    transform: translate(-50%, 20px) rotate(45deg);
}

.bar::before, .bar::after
{
    content:" ";
    display: block;
    position:absolute;
    bottom:0;
    width:100%;
    border-top:5px solid black;
}
.bar::before
{
    margin-left:11px;
    left:50%;
}
.bar::after
{
    margin-right:11px;
    right:50%;
}
button
{
    display:inline-block;
    padding:20px 0px 20px 0px;
    box-sizing: border-box;
    width:33%;
}
</style>
<div class="window">
    <div class="bar"><span></span></div>
    <div class="bar inverted"><span></span></div>
    <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
    <button>Front</button><button>Spine</button><button>Back</button>
    <button>Intro</button><button>1 & 2</button><button>3 & 4</button>
    <div class="bar"><span></span></div>
</div>