Demo Fiddle

Question

我尝试使用像这样的:before伪元素制作箭头

a {
    margin-left: 20px;
}

a:before {
    content: '';
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    border-left-color: grey;
}

出于某种原因箭头不是我的预期（结帐jsfiddle）任何建议如何将我的这个几乎箭头的东西变成一个较小的垂直对齐指向右箭头？

Answer 1

添加

display：inline-block;

到a：之前

Answer 2

通过创造性地使用边框，您可以实现此效果

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

您可以在http://css-tricks.com/snippets/css/css-triangle/

找到原创文章

或者您可能正在寻找此http://jsfiddle.net/stowball/tjPQa/

希望它有所帮助！

Answer 3

超级简单！

Demo Fiddle

将CSS更改为：

a {
    margin-left: 10px;
}
a:before {
    content:'';
    position:absolute;
    display:block;
    top:12px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent grey;
}

Answer 4

HTML

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

的CSS

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

这里是小提琴http://jsfiddle.net/eyZRw/

归功于----＆gt; css tricks

如何使用伪元素制作箭头：之前

4 个答案:

Demo Fiddle