CSS：任何方式来创建顶部到底部的箭头？

Question

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

作为一个可能的解决方案，我想到使用transform: skew属性，但我不认为有可能倾斜左侧&右侧的一个元素。

有什么建议吗？ :)

Answer 1

它使用“一单格”通过采取:before和:after选择的好处是可能的。

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