不規則彈窗是CSS設計中的一種獨特的技能，它可以讓一個簡單的彈窗變得更加有趣和吸引人。在這篇文章中，我們將為你介紹如何使用CSS創建一個不規則彈窗。

/* 定義彈窗樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
padding: 20px;
}
/* 定義彈窗上的關閉按鈕 */
.close-btn {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
/* 定義彈窗的不規則形狀 */
.popup::before, .popup::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: #fff;
z-index: -1;
}
.popup::before {
top: -25px;
left: -25px;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}
.popup::after {
bottom: -25px;
right: -25px;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}

首先，我們定義了一個.popup類，用于定義彈窗的樣式。這將使彈窗位于屏幕的中央，并具有一些邊框、陰影等樣式。

然后，我們定義了一個.close-btn類，用于創建彈窗上的關閉按鈕。它將位于右上角，并帶有一些基本樣式，如背景顏色、邊框、圓角等。

接下來，我們使用 ::before 和 ::after 偽類為彈窗創建不規則形狀。這使得彈窗的邊緣變得更加有趣和吸引人。我們使用了 box-shadow 屬性為它們添加了一些陰影。

這些CSS代碼將創建一個簡單但有趣的不規則彈窗。你可以按照自己的喜好進行修改和調整，以適應你的網站或應用程序的風格。