在網頁設計中，有時會需要制作左右透明箭頭來進行導航或其他操作。這時我們可以利用CSS來實現這一效果。

/* 通用樣式 */
.arrow{
position:relative;
display:inline-block;
font-size: 0;
}
.arrow::before,
.arrow::after{
content: '';
position:absolute;
top:50%;
transform:translateY(-50%);
border-width:10px;
border-style:solid;
opacity:0.8;
}
/* 左箭頭 */
.left-arrow::before{
border-color:transparent #000000 transparent transparent;
left:-5px;
}
.left-arrow::after{
border-color:transparent rgba(0,0,0,0.8) transparent transparent;
left:0;
}
/* 右箭頭 */
.right-arrow::before{
border-color:transparent transparent transparent #000000;
right:-5px;
}
.right-arrow::after{
border-color:transparent transparent transparent rgba(0,0,0,0.8);
right:0;
}

首先，我們創建一個通用的樣式，將箭頭及其相關屬性設置為相對定位和內聯塊級元素，并將字體大小設置為0。然后，我們為左箭頭和右箭頭分別設置樣式。

左箭頭設置方法：箭頭由兩個矩形組成，一個白色的矩形貼在黑色的矩形上面，并調整位置與邊框寬度，形成箭頭的形狀。

右箭頭設置方法：與左箭頭相似，只需要將矩形以及箭頭方向調整。

通過以上CSS樣式，我們可以實現左右透明箭頭的制作，方便進行網頁設計與導航操作。