CSS是網頁設計中不可或缺的一部分，而不固定圓角矩形是CSS中很常見的一個效果。

通常情況下，我們使用border-radius屬性來創建圓角矩形。但是，當我們需要創建可變尺寸的圓角矩形時，border-radius的固定值就不再適用了。

這時候，我們可以使用以下代碼來創建不固定圓角矩形：

div{
background-color: #333;
padding: 20px;
position: relative;
overflow: hidden;
}
div:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50% 50% 0 0;
background-color: #fff;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
div:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0 0 50% 50%;
background-color: #fff;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}

這段代碼主要使用了偽元素:before和:after來實現不固定圓角矩形的效果。具體實現過程如下：

首先，我們需要一個div容器來存放我們需要創建的不固定圓角矩形。這個容器需要有一定的高度和寬度，并且需要設置position: relative和overflow: hidden。

接下來，我們使用:before偽元素來創建一個半圓形，并使用白色背景色來覆蓋掉原有的div容器。我們使用border-radius屬性來設置半圓形的圓角大小，并設置寬度和高度都為100%，以保證這個半圓形能夠完全包含原有的div容器。

為了使半圓形居中，我們使用了transform屬性來對半圓形進行上移，代表的是top: -50%。

接下來，我們使用:after偽元素創建一個與:before一模一樣的半圓形，并使用transform屬性來將它下移，代表的是bottom: -50%。

這樣，我們就成功地創建了一個不固定圓角矩形。如果需要調整圓角大小，只需要修改border-radius屬性的值即可。