可以通过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

看看这个小提琴：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;
}