页脚上的花式箭头

Question

我使用http://cssarrowplease.com/为我的页脚生成一个漂亮的箭头，但我需要再添加2行，而且我不知道如何做到这一点。

到目前为止我从cssarrowplease：

CSS：

footer {
    background-color: #239bd2;
    position: relative;
    margin-top: 50px;
}

footer:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #239bd2;
    border-width: 20px;
    margin-left: -20px;
}

产生这个：

但是我需要添加2条白线（有点像另一条箭头）：

我知道这是一种方式：之后或：之前但我没有这方面的技能。有人可以引导我到在线资源吗？或者也许有人知道该怎么做。

谢谢，

林

Answer 1

您可以采用相同的方式，改变大小和颜色。

问题是你只能插入2个伪元素（::before和::after），但这里我们需要3.所以我添加了一个额外的元素。

footer {
  background-color: #239bd2;
  position: relative;
  margin-top: 50px;
}
footer:before, footer:after, footer > .arrow {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-bottom-color: #239bd2;
  pointer-events: none;
}
footer:after {
  margin-left: -8px;
  border-width: 8px;
}
footer > .arrow {
  margin-left: -11px;
  border-width: 11px;
  border-bottom-color: #fff;
}

<footer><span class="arrow"></span>Footer</footer>

Answer 2

一个伪元素也可以这样做：

footer {
  justify-content: center;
  background: turquoise;
  position: relative;
}

footer:before {
  content: '';
  position: absolute;
  height: 2em;
  width: 2em;
  background: inherit;
  transform: rotate(45deg);
  top: 0;
  left: 50%;
  margin: -1em;
  border: solid white;
  box-shadow: 0 0 0 0.5em turquoise;
  z-index: -1;
}
/* else makup for demo purpose */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body,
footer,
h1 {
  display: flex;
}

body {
  flex-direction: column;
  background: tomato;
}

h1 {
  margin: 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
}

footer a {
  margin: 1em;
  padding: 0.5em;
  color: white;
}

<h1>test</h1>
<footer>
  <a href="#">link 1</a>
  <a href="#">link 1</a>
  <a href="#">link 1</a>
  <a href="#">link 1</a>
</footer>

codepen and vendor prefix