Popover箭頭樣式問題

Question

我創建了一個popover，但我遇到了一些樣式問題。我希望popover的箭頭有紅色的邊框和透明的背景，但取而代之的是全紅。

我已經嘗試將border-bottom更改爲透明，但沒有邊框。

CSS：

a { 
    position: relative; 
} 

.popover:before { 
    content: "\A"; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid red; 
    top: -5px; 
    position: absolute; 
    left: 45% 
} 

.popover { 
    text-decoration: none; 
    color: black; 
    position: absolute; 
    left: 0%; 
    top: 100%; 
    display: block; 
    border: 1px solid red; 
    padding: 10px; 
} 

.popover span { 
    display: block; 
    font-weight: 700; 
} 

JSFiddle Demo

Answer 1

可以前後同時使用CSS僞元素做到這一點。

.popover:before { 
content: ""; 
position: absolute; 
top: -15px; 
left: 30px; 
border-width: 0 15px 15px 15px; 
border-style: solid; 
border-color: red transparent; 
display: block; 
width: 0;} 

.popover:after { 
content: ""; 
position: absolute; 
top: -10px; 
left: 36px; 
border-width: 0 10px 10px 10px; 
border-style: solid; 
border-color: #fff transparent; 
display: block;}