CSS（層疊樣式表）是一種用于描述網頁樣式的語言。它有能力將頁面元素進行排版、繪制邊框、添加顏色、設置字體等等。一種常見的CSS屬性是border-radius，它可以使塊狀元素變形成圓角或橢圓形。但是，如何將一個塊狀元素變形成一個完全自定義的形狀呢？

.element {
width: 200px;
height: 100px;
background-color: red;
}
.element:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-top: 100px solid yellow;
border-bottom: 100px solid yellow;
border-right: 100px solid transparent;
left: -100px;
}

如上代碼所示，我們可以通過使用偽元素:before來實現塊狀元素的變形。在這個例子中，我們首先定義一個寬高為200px和100px的背景為紅色的元素。然后，我們通過:before創建一個矩形，并通過設置不同的border屬性將矩形的右側變成了斜梯形。最后，我們將矩形通過設置絕對定位和left屬性移動到了元素的左側。

通過這個方法，我們還可以創建出更加復雜的形狀，例如：梯形、三角形、腰形等等。只需要通過修改border屬性的數值來定義所需的形狀即可。

.element {
width: 150px;
height: 150px;
background-color: red;
}
.element:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-bottom: 80px solid green;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
top: 0;
left: 0;
}

如上代碼所示，我們可以通過border屬性的組合來實現一個向下的梯形。在這個例子中，我們定義了一個寬高為150px的背景為紅色的元素，并通過修改border屬性的數值來使其變形成梯形。

總結一下，通過使用CSS的border屬性加上偽元素:before，我們可以輕松地將塊狀元素變形成我們所需要的形狀，為網頁的美觀和差異性提供了無限的可能性。