在CSS中，我們可以使用偽元素來生成箭頭，并通過樣式控制它。其中常用的偽元素是:before和:after。
首先，我們需要設置箭頭的大小和顏色。以下是示例代碼：

html
<style>
.arrow {
position: relative;
width: 20px;
height: 20px;
}
.arrow:before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-top: 1px solid black;
border-right: 1px solid black;
}
.arrow:after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-top: 1px solid black;
border-left: 1px solid black;
}
</style>
<p class="arrow"></p>

這里我們使用了一個包裹容器和兩個偽元素來構建箭頭。包裹容器的大小可以根據具體需要進行修改。偽元素的尺寸、顏色和樣式同樣可以進行自定義設置。
當然，如果需要拉長箭頭，需要通過修改箭頭的寬度來實現。以下是示例代碼：

html
<style>
.arrow {
position: relative;
width: 200px;
height: 20px;
}
.arrow:before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-top: 1px solid black;
border-right: 1px solid black;
}
.arrow:after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-top: 1px solid black;
border-left: 1px solid black;
}
.arrow:before, .arrow:after {
width: 20%;
}
</style>
<p class="arrow"></p>

在這里，我們將箭頭偽元素的寬度設置為20%。這樣就可以通過設置包裹容器的寬度來實現箭頭的拉長。
最終，這種方法可以靈活地根據需要定制箭頭的樣式和寬度。