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代码将创建一个简单但有趣的不规则弹窗。你可以按照自己的喜好进行修改和调整，以适应你的网站或应用程序的风格。