如何使用：之后旋转箭头，因为我想

我有一个小问题。
我需要得到像图像波纹管，但不能设置箭头，因为我想，但我认为我靠近:)
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; 
}

enter image description here

来源

2013-11-22 1110

试试这个：

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/bottomleft/right位置相对于父元素更稳定的位置。此外，我创建了这样一个箭头，不需要旋转。

来源

2013-11-22 23:48:14

感谢你能也许告诉我如何使它喜欢上图像白色内部和边界其他颜色？ – 1110

我知道如何在框上设置边框，但不能在该小角落设置边框。 – 1110

这有点困难，因为从本质上讲，这就是角落所在;边界。我要看看[cssarrowplease.com]（http://cssarrowplease.com/）（也许是个好主意，也可以查看），看看我能想出什么。 –

更改border-left: 10px solid #666到border-left: 10px solid transparent ..和border-top: 0px solid transparent到border-top: 10px solid transparent。

要改变三角形的形状，上border-right设置0px或只是完全除去它。

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; 
}

来源

2013-11-22 23:48:59

您需要使用正确的边界，剩下的只是定位

.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

来源

2013-11-22 23:50:13

如何使用：之后旋转箭头，因为我想

回答

相关问题