Svg非常适合在html中创建形状

Question

我想制作带有几个内联块li元素的菜单导航栏，每个元素都必须具有箭头般的右侧。像这样：

我用Google搜索，最常见的答案是使用带有透明边框的css技巧。像这样：http://jsfiddle.net/jx99z/5/

HTML：

OutOfMemoryException

的CSS：

Application

看起来还不错，但是当我尝试添加其他元素时：悬停，它们的外观和行为都不正常：http://jsfiddle.net/txayr2j6/

HTML：

<div class="text">Some Text<span class="arrow"></span></div>

的CSS：

.text {
    background-color:#ff0000;
    color:#fff;
    display:inline-block;
    padding-left:4px;
}
.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;
    /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color:#fff; /* change background color acc to bg color */ 
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #ff0000;
    left:0.25em;
}

我发现另一个解决方案是，我可以使用svg（无论这意味着）绘制任何元素，如下所示：http://codepen.io/anon/pen/OXWoXd

HTML：

<div class="text">Some Text<span class="arrow"></span></div>
<div class="text">Some Text<span class="arrow"></span></div>

的CSS：

.text {
    background-color:#ff0000;
    color:#fff;
    display:inline-block;
    padding-left:4px;
}
.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;
    /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color:#fff; /* change background color acc to bg color */ 
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #ff0000;
    left:0.25em;
}
.text:hover {
    background-color:#ccc;
    border-left-color: #ccc;
}

但是这个解决方案更糟糕：不知怎的，我不能让元素超过300像素，看看那些丑陋的边框和背景。此外，我希望该栏能够做出回应。谢谢！

Answer 1

Svg非常适合在html中创建形状

使用多边形元素作为形状链接说明的文字元素 用于创建链接的元素。

#arrow-menu a polygon {
  fill: #888;
  stroke: #222;
}
#arrow-menu a:hover polygon {
  stroke: #222;
  fill: black;
}
#arrow-menu a:hover text {
  fill: cornflowerblue;
}
#arrow-menu a {
  font-size: 5px;
}

<svg id="arrow-menu" viewBox="-1 -1 112 22" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#">
    <polygon points="0,0 20,0 25,10 20,20 0,20 0,0"></polygon>
    <text x="1.5" y="11.5">Menu link</text>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(22)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(44)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(66)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
</svg>

Answer 2

这是你要找的吗？它是使用before和after Fiddle

制作的

最好用css制作而不是用图像

Answer 3

非常有趣的问题。我认为最好使用图片，因为你希望你的悬停事件能够工作，而且点击边框也有问题。这是设计的完整实现以及事件：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .text {
                background-color: rgb(237, 28, 36);
                color:white;
                padding-left:4px;
                height: 30px;
                padding-top: 10px;
            }
        </style>
        <script type="text/javascript">
            function mouseoverText(index) {
                var images = document.querySelectorAll(".image");
                var currentText = document.querySelectorAll(".text")[index];
                currentText.style["background-color"] = "white";
                currentText.style["color"] = "red";
                images[index].src = ((images.length - 1 === index) ? "white-white" : "white-red") + "-arrow.png";
                if (index > 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 < height / 2) && (x > 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");
            }
        </script>
    </head>
    <body>
        <div style="display: inline-flex;">
            <div class="text" onmousemove="mouseoverText(0);" onmouseout="mouseoutText(0);" onclick="clk(0);">Some Text</div>
            <img class="image" src="red-red-arrow.png" onmousemove="mouseoverArrow(event, 0);" onmouseout="mouseoutArrow();" onclick="clk();" />
            <div class="text" onmousemove="mouseoverText(1);" onmouseout="mouseoutText(1);" onclick="clk(1);">Some Text</div>
            <img class="image" src="red-red-arrow.png" onmousemove="mouseoverArrow(event, 1);" onmouseout="mouseoutArrow();" onclick="clk();" />
            <div class="text" onmousemove="mouseoverText(2);" onmouseout="mouseoutText(2);" onclick="clk(2);">Some Text</div>
            <img class="image" src="red-white-arrow.png" onmousemove="mouseoverArrow(event, 2);" onmouseout="mouseoutArrow();" onclick="clk();" />
        </div>
    </body>
</html>

我也附上有用的图片：

如何在没有CSS边框技巧的情况下制作带箭头边的div？

3 个答案:

Svg非常适合在html中创建形状