如何使用：之後旋轉箭頭，因爲我想

我有一個小問題。
我需要得到像圖像波紋管，但不能設置箭頭，因爲我想，但我認爲我靠近:)
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

如何使用：之後旋轉箭頭，因爲我想

回答

相關問題