html - 弹出框箭头样式问题

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