說到CSS圖案，相信很多人都會想到復雜的背景圖案或者是精美的邊框。實際上，利用CSS可以輕松地制作出各種炫酷的圖案，只需要掌握一些基本的CSS屬性和方法即可。

/*制作正方形*/
.square {
width: 100px;
height: 100px;
background-color: #f00;
}
/*制作三角形*/
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #f00;
}
/*制作圓形*/
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}
/*制作重疊圖案*/
.overlap {
width: 100px;
height: 100px;
position: relative;
}
.overlap::before, .overlap::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.overlap::before {
top: 0;
left: 0;
background-color: #f00;
}
.overlap::after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0f0;
}

以上是幾個簡單的CSS圖案示例，其中包括了制作正方形、三角形、圓形以及重疊圖案等操作方法。通過對CSS屬性的靈活運用，可以創造出更加復雜的圖案，讓網站看起來更加具有視覺沖擊力。