html - 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:我如何使箭头尖更细——即目前要得到它必须是 90px 边框宽度的点，但我希望该点显示在 30px 左右，但如果我更改边框宽度，该点刚被切断

2:如何让 Nib 不透明，我尝试使用 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