html - 只需要箭头的边框而不是颜色

Question

我正在尝试实现如下所示的箭头。

为此我只需要边框而不是颜色

请检查此链接 here

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  .pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  .pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

<div class="pointer">
    
</div>

我希望像下图一样

Answer 1

选项 1:改用 svg，仅适用于现代浏览器

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/>
</svg>

方案二:使用border，可以改变值使其更平滑

.arrow {
  width: 200px;
  height: 80px;
  position: relative;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.arrow:before,
.arrow:after {
  content: "";
  box-sizing: content-box;
  border: 1px solid transparent;
  width: 80px;
  height: 80px;
  display: block;
  transform: translate(-43px) rotate(45deg) scale(0.708);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow:before {}

.arrow:after {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(42px) rotate(45deg) scale(0.708);
}

<div class="arrow"></div>

选项 3:使用 svg 作为背景

.arrow {
  background: url('data:image/svg+xml;utf8,<svg width="200" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/></svg>');
  width: 200px;
  height: 20px;
}

<div class="arrow"></div>