Geek Answers Handbook

How to make div with arrow side without css tricks

I want to create a menu navigation bar with several built-in li elements, each of which should have a right side on the right. Like this: my dream menu aww

I went for it, and the most common answer is to use css tricks with a transparent border. Like this one: http://jsfiddle.net/jx99z/5/

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;
}

This seems very good, but when I try to add other elements with: hover, they do not look and behave correctly: http://jsfiddle.net/txayr2j6/

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;
}

Another solution I found is that I can draw any element using svg (whatever that means): http://codepen.io/anon/pen/OXWoXd

HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="
    0,0 
    0,200
    270,200
    300,100
    270,0
    150,0
    " />
<div>Item 1</div>
</svg>

CSS

svg polygon {
    fill: transparent;
    stroke: black;
    stroke-width: 2px;
}

svg {
    background-color: #ccc;
    height: 50%; 
}

body, html {
    height: 100%;
    margin: .2em; 
}

: - 300 px . , , . !

+4
3

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>
Hide result
+5

, ? before after Fiddle

css,

+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>

:

enter image description here enter image description here enter image description here enter image description here

0
source

More articles:


All Articles