Artur Miller Artur Miller - 5 months ago 36
CSS Question

How to make a div with arrowlike side without css border tricks?

I want to make menu navigation bar with several inline-block li elements, each of them must have arrow-like right side. Like this:
my dream menu aww

I googled for it and the most common answer is to use css tricks with 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;
}


It seems pretty good, but when I try to add other elements with :hover, they don't look and behave properly: 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, which I found, is that I can draw any element using svg (whatever that means) like this: 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;
}


But that solution is even worse: somehow I can't make element wider than 300 px and look at those ugly border and background. Also, I want that bar to be responsive. Thanks!

Answer

Is it this what you are looking for? It is made with before and after Fiddle

It is better to make it with css than with images

Comments