工具提示箭头与内容背景颜色相同

Question

所以给出了这个html / css

http://cdpn.io/gwkfy

.tooltip {
    position: relative;
    background-color: #369;
    display: inline-block;
    width: 300px;
    height: 200px;
}

.tooltip:before {
    position: absolute;
    content: "";
    left: 100%;
    top: calc(50% - 10px);
    width: 0;
    border-style: solid;
    border-width: 10px;
    border-color: transparent;
    border-left-color: rgba(0, 0, 0, 0.5);
}

<div class="tooltip"></div>

是否可以让箭头继承工具提示内容的背景颜色？

Answer 1

  

是否可以让箭头继承背景颜色   工具提示内容？

嗯，除非你使用JavaScript，否则没有。

但是，您可以为父级设置border-color属性，并为子级使用inherit值：

.tooltip {
    background-color: #369;
    border-color: #369;
}

.tooltip:before {
    border-left-color: inherit;
}

<强> JSFiddle Demo