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：我如何使提示不透明，我尝试使用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;

关于应该解决问题的伪：after元素，

如果你想要一个跨浏览器实现它，那么看看这个

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

css3箭头太大而且不透明

2 个答案: