如何在没有css边界技巧的情况下制作一个有箭头的div?-Howtomakeadivwitharrowlikesidewithoutcssbordertricks?

作者：YOYO很快乐的傻瓜 | 来源：互联网 | 2023-10-09 20:02

Iwanttomakemenunavigationbarwithseveralinline-blocklielements,eachofthemmusthavearr

I want to make menu navigation bar with several inline-block li elements, each of them must have arrow-like right side. Like this: 0) { images[index - 1].src = "red-white-arrow.png"; } } function mouseoutText(index) { var currentText = document.querySelectorAll(".text")[index]; currentText.style["background-color"] = "rgb(237, 28, 36)"; currentText.style["color"] = "white"; var images = document.querySelectorAll(".image"); if (index >= 0) { images[index].src = ((images.length - 1 === index) ? "red-white" : "red-red") + "-arrow.png"; if (index > 0) { images[index - 1].src = "red-red-arrow.png"; } } } var lastIndex = -1; function mouseoverArrow(event, index) { if (!!event) { var x = event.offsetX; var y = event.offsetY; var height = 40; if (((y y)) || ((y >= height / 2) && (x > (height - y)))) { mouseoverArrow(null, index + 1); return; } } if (lastIndex !== -1) { mouseoutArrow(); lastIndex = -1; } lastIndex = index; var texts = document.querySelectorAll(".text"); if (index === texts.length) { return; } texts[index].style["background-color"] = "white"; texts[index].style.color = "red"; mouseoverText(index); } function mouseoutArrow() { if (lastIndex <0) { return; } var texts = document.querySelectorAll(".text"); if (lastIndex >= texts.length) { return; } texts[lastIndex].style.color = "white"; texts[lastIndex].style["background-color"] = "rgb(237, 28, 36)"; mouseoutText(lastIndex); lastIndex = -1; } function clk(index) { console.log("Element " + (lastIndex === -1 ? index : lastIndex) + " was clicked"); }