CSS盒子左向下

在CSS中，我們可以通過設置元素的樣式，使其呈現出一個左向下的盒子形狀。這種樣式經常被用在制作箭頭或指示圖標時。

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #000000;
transform: rotate(-45deg);
}

上面的代碼是用來制作一個簡單的箭頭形狀的樣式。我們首先指定了箭頭的寬度和高度為0，然后我們利用邊框的特性來制作出一個三角形的形狀。具體來說，我們設置了上下兩個邊框為透明色，右側的邊框為黑色，寬度為20px。最后，我們使用transform屬性將箭頭旋轉了45度，以形成左下方向的形狀。

此外，我們還可以使用CSS的偽元素來制作更復雜的左向下盒子樣式。例如，下面的代碼可以制作出一個帶有邊框、圓角和陰影的左向下盒子：

.box {
position: relative;
width: 100px;
height: 100px;
border: 4px solid #000000;
border-radius: 10px;
box-shadow: 2px 2px 5px #000000;
}
.box::before {
content: "";
position: absolute;
top: 50%;
left: -20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #000000;
transform: rotate(-45deg);
}

這個樣式使用了CSS的偽元素::before來制作出一個左向下的三角形形狀，然后將其放置在盒子的左下角。此外，我們還使用了border-radius屬性來設置盒子的圓角，box-shadow屬性來添加盒子的陰影效果。