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>