css - 可以通过 CSS 创建真正的箭头并旋转它吗？

Question

是否可以使用 CSS 创建一个完整的箭头？

这就是我创建箭头的方式:http://jsfiddle.net/2fsoz6ye/

#demo:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;

    border: 10px solid transparent;
    border-top-color: #333;
}

但我还需要箭头的后部。看起来像这样:

然后我想旋转 CSS 箭头，这样我就可以动态地使用它...即指向顶部、左侧、45°...

Answer 1

看看这个 fiddle :http://jsfiddle.net/2fsoz6ye/2/

.container{
    transform: rotate(30deg);
    width:60px; height:40px; background:#ccc; margin:100px auto;}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #ccc;
    float:right;
    margin-top:-20px;
    margin-right:-40px;
}