CSS 可以幫助你創(chuàng)建各種形狀的盒子，其中包括長箭頭矩形。

要?jiǎng)?chuàng)建一個(gè)長箭頭矩形，你需要使用 CSS 中的偽元素::before和::after。你還需要設(shè)置長方形的背景顏色和邊框。

以下是實(shí)現(xiàn)長箭頭矩形的 CSS 代碼：

.arrow-box {
position: relative;
background-color: #408080;
border: 1px solid #000;
padding: 20px;
}
.arrow-box::before,
.arrow-box::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-color: #408080 transparent transparent transparent;
border-width: 20px;
}
.arrow-box::before {
top: -40px;
}
.arrow-box::after {
top: -39px;
border-width: 19px;
}

首先，我們創(chuàng)建一個(gè)長方形的盒子，命名為.arrow-box。我們在樣式表中設(shè)置盒子的位置、背景顏色、邊框和內(nèi)邊距。

接下來，我們使用::before和::after創(chuàng)建長箭頭的兩個(gè)部分。我們將它們定位在矩形的底部中央。我們使用transform: translateX(-50%)將箭頭左移 50% 的寬度，使其與矩形底部對齊。

我們將箭頭的邊框樣式設(shè)置為實(shí)心的，顏色為矩形的背景色，邊框?qū)挾葹?20px。在箭頭的頂部，我們使用top屬性將箭頭向上移動(dòng) 40px，從而形成箭頭的尾巴；在箭頭的尖端，我們使用top和border-width屬性使箭頭變尖。

這樣，我們就創(chuàng)建了一個(gè)漂亮的長箭頭矩形。