jquery - 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>