html - 如何使用:之后根据需要旋转箭头

我有一个小问题。
我需要获得像波纹管一样的图像，但是无法根据需要设置箭头，但是我认为我已经接近了：）
http://jsfiddle.net/LDhLv/

.d:after {
    content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}

最佳答案

尝试这个：

CSS：

.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
    content: "";
    position:absolute;
    width: 0;
    height: 0;
}
.d:before {
    top: -10px;
    right: -1px;
    border-bottom: 10px solid #666;
    border-left: 10px solid transparent;
}

.d:after {
    top: -8px;
    right: 0px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
}

JSFiddle

我已经调整了top/bottom left/right的位置，使其相对于父元素而言更加稳定。另外，我以不需要旋转的方式创建了箭头。

关于html - 如何使用:之后根据需要旋转箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20156540/