使用方法：按要求旋转箭头后

Question

我有一点问题 我需要得到像波纹管一样的图像，但不能按我的意愿设置箭头，但我认为我很接近:) 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;
}

Answer 1

试试这个：

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定位以获得更稳定的位置。另外，我创建了箭头，不需要旋转。

Answer 2

将border-left: 10px solid #666更改为border-left: 10px solid transparent ..并将border-top: 0px solid transparent更改为border-top: 10px solid transparent。

要更改三角形的形状，请在0px上设置border-right或完全删除它。

jsFiddle example

.d:after {
    content: "\A";
    position:absolute;
    bottom: 50px;
    left: 90px;
    border-bottom: 10px solid #666; 
    border-left: 10px solid transparent;    
    border-top: 10px solid transparent;
}

Answer 3

你需要使用正确的边框，其余的只是位置

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

请参见修改后的JSFiddle