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 Pseudo-elements来做到这一点。

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