CSS矩形的兩邊挖孔效果一般是應用在導航條、按鈕等元素上，能夠很好地提升網頁的美觀度。下面介紹兩種常見的實現方法：

.left-hole {
position: relative;
width: 100px;
height: 40px;
background-color: #f00;
border-radius: 10px;
}
.left-hole::before {
content: "";
position: absolute;
top: 0;
left: -20px;
width: 20px;
height: 40px;
background-color: #fff;
border-radius: 0 10px 10px 0;
}
.right-hole {
position: relative;
width: 100px;
height: 40px;
background-color: #f00;
border-radius: 10px;
}
.right-hole::after {
content: "";
position: absolute;
top: 0;
right: -20px;
width: 20px;
height: 40px;
background-color: #fff;
border-radius: 10px 0 0 10px;
}

以上代碼中，左邊挖孔使用了偽元素::before，而右邊挖孔使用了偽元素::after。兩者的區別在于掛載的位置不同。在CSS中，偽元素可以用來添加一些虛擬的元素，可以用CSS控制其樣式等屬性。

在上述代碼中，通過設置挖孔偽元素的寬度和高度，控制其大小；通過設置位置，讓其出現在矩形的左側或右側；通過設置邊框半徑，讓其形成圓角效果。通過改變對應參數，就能達到想要的效果。

總之，通過使用CSS矩形兩邊挖孔代碼，可以在網頁設計中增加美感和創意元素，從而使頁面更具吸引力。