Popover arrow styling issues

Question

ポップオーバーを作成しましたが、スタイリングの問題があります。ポップオーバーの矢印に赤い枠線と透明な背景がありますが、その代わりにすべて赤です。

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