CSS3箭頭過大，而不是不透明

Question

我有以下css arrow fiddle：

<div class="arrow"></div> 

.arrow { background-color: #F4922D; width: 300px; background: rgba(244,146,45,0.9); padding: 40px 30px; min-height: 100px; position: relative; } 
.arrow:after { left: 100%; top: 0; bottom: 0; border: solid transparent; content: " "; width: 0; position: absolute; pointer-events: none; border-color: rgba(244, 146, 45, 0); border-left-color: #F4922D; border-width: 90px; } 

我的問題是

1：我會怎麼做箭頭尖端減小 - 即在瞬間明白了它必須是90像素的邊框寬度，但我想顯示在大約30像素點，但如果我改變邊框寬度點剛剛被切斷

2：我會怎麼做尖的不透明，我嘗試使用border-color: rgba(244, 146, 45, 0.5);但這並沒有改變任何東西

Answer 1

只調整左邊框的寬度，以獲得「細細」我認爲你的意思。爲了要給小費一樣透明的<div>本身，再次，你需要的目標只有左邊框：

.arrow:after { 
    left: 100%; 
    top: 0; bottom: 0; 
    border: solid transparent; 
    content: " "; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: transparent; 
    border-left-color: rgba(244,146,45,0.9); 
    border-width: 90px; 
    border-left-width: 160px; 
} 

JSFiddle

Answer 2

爲了解決透明度問題，

只是簡單地設置

opacity: 0.9; 

上僞

：元素之後應該解決這一問題，

，如果你想它的一個跨瀏覽器實現，那麼就來看看這個

http://css-tricks.com/snippets/css/cross-browser-opacity/