Источник вопроса : https://toster.ru/q/504757#answers_list
Я всё сделал кроме маленького ньюанса,
я понимаю что нужен svg но может быть можно обойтись и без него ?
Как реализовать border-image в этом случае? Это то что я уже сделал :
*{
margin:0;
padding:0;
}
ul{
height:100px;
background:url(http://st-gdefon.gallery.world/wallpapers_original/74533_gallery.world.jpg?9b30f88865a6ee068aa988b568d8492f);
background-size:cover;
transform:translate(0,100px);
border-top:4px solid yellow;
border-bottom:4px solid yellow;
list-style-type:none;
display:flex;
justify-content:flex-end;
}
ul li{
margin-right:30px;
height:100%;
display:block;
line-height:100px;
position:relative;
z-index:100;
}
ul a{
text-decoration:none;
font-size:1.6em;
position:relative;
z-index:100;
}
ul li:after{
content:"";
display:block;
width:70px;
height:70px;
background:rgb(255,255,255);
position:absolute;
top:-40px; left:-30%;
transform:rotate(45deg);
border-bottom:4px solid yellow;
border-right:4px solid yellow;
visibility:hidden;
}
ul li:hover:after{
visibility:visible;
}
ul li:first-child:before{
content:"";
position:absolute;
top:-40px; left:-20px;
z-index:200;
border-top:40px solid red;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid transparent;
}
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
<li><a href="">item5</a></li>
</ul>