devo-book/pad.html

<style>

.window
{
    position:relative;
    width:500px;
    padding:20px;
    border-bottom: none;
    box-sizing:border-box;
}


.bar
{
    position:relative;
    bottom:0;
    left:0;
    width:100%;
    height:44px;
    overflow:hidden;
}
.bar span
{
    display: block;
    position: absolute;
    top: -10.5px;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 5px solid #000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: translate(-50%, 20px) rotate(45deg);
    transition: left 0.4s;
}
.bar span::before, .bar span::after
{
    content: " ";
    display: block;
    position: absolute;
    width: 1000px;
    height:0px;
    border-top: 5px solid black;
    transform:rotate(-45deg);
}
.bar span::before
{
    bottom: -0.5px;
    right: 20px;
    transform-origin: right bottom;
}
.bar span::after
{
    top: -4px;
    left: 17px;
    transform-origin: left top;
}
.bar--down
{
    transform: scaleY(-1);
}
.bar--up
{
    transform: scaleY(1);
}
.bar--1-3 span
{
    left:16.6%;
}
.bar--2-3 span
{
    left:50%;
}
.bar--3-3 span
{
    left:83%;
}


button
{
    display:inline-block;
    padding:5px 0px 5px 0px;
    box-sizing: border-box;
    width:33%;
}
</style>
<div class="window">
    <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
    <button onclick="BarPos(1)">Front</button><button onclick="BarPos(2)">Spine</button><button onclick="BarPos(3)">Back</button>
    <div class="bar"><span></span></div>
    <button onclick="BarPos(4)">Intro</button><button onclick="BarPos(5)">1 & 2</button><button onclick="BarPos(6)">3 & 4</button>
</div>

<script>
    function BarPos(index)
    {
        var classX = "bar--" + (((index-1) % 3)+1) + "-3";
        var classY = index > 3 ? "bar--down" : "bar--up";
        document.querySelector(".bar").setAttribute("class", "bar " + classX + " " + classY);
    }
</script>