標題：CSS 互補梯形

互補梯形是一種常見的CSS樣式，通過在兩個梯形之間添加一個等長的空白來實現。這種樣式可以通過簡單的調整梯形的大小和位置來改變其外觀，同時也可以通過添加不同的顏色和其他特效來增強其效果。

```html

<div class="梯形">

<div class="left">

</div>

<div class="right">

</div>

<div class="空白">

<p>這是一個空白區域。</p>

</div>

</div>

```css

.梯形 {

position: relative;

width: 200px;

height: 300px;

.left,

.right {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 300px;

background-color: #ccc;

.left {

left: 50%;

transform: translateX(-50%);

.right {

right: 50%;

transform: translateX(50%);

.空白 {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100px;

height: 100px;

background-color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-size: 16px;

color: #333;

在上面的示例中，我們創建了一個梯形，其中左側梯形和右側梯形之間有一個空白區域。我們使用CSS的`position`屬性將兩個梯形定位到頁面的不同位置，并通過`transform`屬性調整它們的大小和位置。我們還為空白區域添加了一個`display: flex`屬性，以便將其轉換為一個多行文本框，并使其在中心對齊。

通過使用互補梯形，我們可以輕松地創建出各種不同類型的梯形，并對其進行個性化的設置。這種樣式還適用于其他許多場景，例如圖像分割、背景填充等。