如何使一个div与箭头边没有CSS边框技巧？ [英] How to make a div with arrowlike side without css border tricks?
问题描述
我想让菜单导航栏有几个inline-block li元素，每个元素都必须有箭头的右侧。像这样：
我googled为它，最常见的答案是使用CSS透明边境。像这样： http://jsfiddle.net/jx99z/5/
html：
< div class =text>部分文字< span class =arrow>< / span>< / div>
css：
code> .text {
background-color：＃ff0000;
color：#fff;
display：inline-block;
padding-left：4px;
}
.arrow {
border-style：dotted;
border-color：transparent;
border-width：0.20em;
display：-moz-inline-box;
display：inline-block;
/ *使用font-size控制箭头的大小。 * /
font-size：100px;
height：0;
line-height：0;
position：relative;
vertical-align：middle;
width：0;
background-color：#fff; / *改变背景颜色acc到bg颜色* /
border-left-width：0.2em;
border-left-style：solid;
border-left-color：＃ff0000;
left：0.25em;
}
看起来不错，但是当我尝试添加其他元素：hover ，则它们的外观和行为不正常： http://jsfiddle.net/txayr2j6/
html：
< div class =text> ; span class =arrow>< / span>< / div>
< div class =text>部分文字< span class =arrow>< / span>< / div>
css：
code> .text {
background-color：＃ff0000;
color：#fff;
display：inline-block;
padding-left：4px;
}
.arrow {
border-style：dotted;
border-color：transparent;
border-width：0.20em;
display：-moz-inline-box;
display：inline-block;
/ *使用font-size控制箭头的大小。 * /
font-size：100px;
height：0;
line-height：0;
position：relative;
vertical-align：middle;
width：0;
background-color：#fff; / *改变背景颜色acc到bg颜色* /
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;
}
我发现的另一个解决方案是，我可以使用svg绘制任何元素（无论是什么意思），例如： http://codepen.io/anon/pen/OXWoXd
html：
< svg xmlns =http： //www.w3.org/2000/svgversion =1.1>
< polygon points =
0,0
0,200
270,200
300,100
270,0
150,0
/>
< div>项目1< / div>
< / svg>
css：
code> svg polygon {
fill：transparent;
stroke：black;
stroke-width：2px;
}
svg {
background-color：#ccc;
height：50％;
}
body，html {
height：100％;
margin：.2em;
}
但是解决方案更糟糕： 300像素，看看那些丑陋的边框和背景。此外，我想要那个吧响应。感谢！
Svg非常适合在html中创建形状
对形状使用多边形元素。
文本元素用于链接描述。
元素用于创建链接。
＃arrow- ：＃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-menuviewBox = - 1 -1 112 22xmlns：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.5y =11.5>菜单链接< / 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>
I want to make menu navigation bar with several inline-block li elements, each of them must have arrow-like right side. Like this:
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!
Svg are great for creating shapes in html
Used a polygon element for the shape.
Text element for the link description.
A element for creating a link.
#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>
这篇关于如何使一个div与箭头边没有CSS边框技巧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
