I have the following [css arrow fiddle](http://jsfiddle.net/peteng/KDL9J/1/):

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

```

My questions are 

1: how would I make the arrow tip thinner - ie at the moment to get the point it has to be 90px border-width but I would like the point to show at around 30px but if I change the border width the point just gets cut off

2: how would I make the tip opaque, I tried using `border-color: rgba(244, 146, 45, 0.5);` but that didn't change anything