CSS中的偽類:before是一個非常強大的工具，它可以用來在元素之前插入一些內容。我們可以利用:before來畫出一個有趣的梯形形狀。 首先，我們需要定義一個div元素，并給它一個寬度和高度，作為我們的梯形的底部和高度。接著，需要給div設置position:relative屬性，以便我們后續設置:before的position:absolute屬性。以下是一段基礎的CSS代碼： pre{ background-color: #f9f2f4; border: 1px solid #e1e1e8; padding: 8px; border-radius: 5px; }.trapezium { width: 200px; height: 100px; position: relative; background-color: #f1f1f1; } 接下來，我們需要設置:before的樣式。我們給它一個背景色和高度和寬度相等，這里為50px。接著需要將它旋轉45度，這里使用的是transform:rotate(45deg)。最后需要將它的position設為absolute，top和left都設置為0，這樣它就能在div元素的左上角顯示了。以下是完整的代碼： .trapezium:before { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: #f1f1f1; transform:rotate(45deg); } 這樣我們就完成了一個簡單的梯形形狀。當然，使用:before的靈活性讓我們可以進一步美化我們的梯形。例如，我們可以在:before添加邊框、漸變、陰影等效果，使它看起來更加絢麗。 總之，使用:before可以充分發揮出CSS的強大功能，為我們的網頁添加有趣而獨特的效果。無論是梯形、圓角、箭頭或其他形狀，都可以輕松實現。