在前端開發中，經常會遇到需要添加矩形和三角形箭頭的需求。這種需求可以用CSS來輕松實現。下面是實現過程：

/* CSS代碼 */
/* 矩形 */
.rectangle {
width: 200px;
height: 100px;
background-color: #369;
border-radius: 10px;
}
/* 上箭頭 */
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #369;
}
/* 下箭頭 */
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #369;
}
/* 左箭頭 */
.arrow-left {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #369;
}
/* 右箭頭 */
.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #369;
}

以上CSS代碼中，我們定義了四個矩形、上箭頭、下箭頭、左箭頭、右箭頭樣式，下面是代碼如何使用：

在HTML中，我們通過添加不同的class來實現不同形狀的樣式。具體效果如下：

通過以上CSS和HTML代碼，我們成功實現了矩形和箭頭的組合。這種組合可以用來實現各種圖形的效果，同時也可以為我們的網站帶來更加美觀、貼近用戶的視覺效果。