在網頁設計中，我們經常需要用到一些圖形來優化頁面效果，比如按鈕、菜單、背景等等。常用的繪圖工具有 Photoshop、 Sketch、Adobe Illustrator 等，但是這些工具學習成本較高。而 CSS 可以用來繪制簡單的圖形，并且可以隨時修改樣式，非常便捷。

那么如何使用 CSS 來畫出好看的圖形呢？

首先，需要了解一些基礎的 CSS 屬性。比如，在繪制形狀時，可以使用 border、background-color 等屬性。如果需要更加細節的控制，可以使用 border-radius、box-shadow、transform 等屬性。

.btn {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ff6600;
border: none;
border-radius: 20px;
color: #fff;
font-size: 16px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
}
.btn:hover {
background-color: #ff3300;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

上面的代碼展示了一個簡單的按鈕樣式，其中 border-radius 屬性可以控制按鈕的圓角大小；box-shadow 屬性可以添加陰影效果；transition 屬性則可以添加動畫效果。

如果需要畫出更加復雜的圖形，可以使用 CSS 繪制圖形的技巧，比如在繪制三角形時，可以利用 border 實現：

.triangle {
width: 0;
height: 0;
border-width: 0 50px 50px 50px;
border-color: transparent transparent #ff6600 transparent;
border-style: solid;
}

其中，用 border-width 控制三角形的大小；border-color 控制三角形邊框顏色和填充顏色，同時利用 transparent 隱藏其他邊框；border-style 則設置邊框的樣式為實線。

總之，使用 CSS 繪制圖形需要一定的技巧和經驗，但是一旦掌握了其中的方法，就可以在網頁設計中獲得更多的自由度和創造力。