CSS：有什么方法可以创建从上到下的箭头？

Question

我在这里有一个与CSS相关的问题。我想在屏幕截图上创建一个水平箭头（实际上它是在油漆中添加的）。

作为一种可能的解决方案，我想到使用transform: skew属性，但我不认为可以在左侧和右侧扭曲一个元素。

对此有任何建议吗？ ：）

Answer 1

利用:before和:after选择器可以使用“单个div”。

.arrow {
  margin: 50px;
  width: 500px;
  height: 40px;
}
.arrow:before {
  content: '';
  position: relative;
  left: 0;
  top: 0;
  display: inline-block;
  width: calc(50% - 2px);
  height: 100%;
  border: 1px solid red;
  border-right-width: 0;
  transform: skewY(10deg);
}
.arrow:after {
  content: '';
  right: 0;
  top: 0;
  position: relative;
  display: inline-block;
  width: calc(50% - 2px);
  height: 100%;
  border: 1px solid red;
  border-left-width: 0;
  transform: skewY(-10deg);
}

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