在頁面設計中，圓角矩形廣泛應用，內建的border-radius屬性也可以很方便的實現，但是css并沒有提供不規則的圓角矩形的實現方式，下面介紹一些實現方法。

.rounded{
background-color: #fff;
border-radius: 20px 20px 0 0;
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

clip-path屬性可以用來定義區域內的可見部分，使用polygon函數可以定義不規則的形狀，具體參數可以根據需要自由調整。以上代碼實現了一個上面兩個角為圓角，下面兩個角為45度傾斜的不規則圓角矩形。

.rounded{
background-color: #fff;
border-radius: 20px 20px 0 0;
shape-outside: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.rounded:before{
content: "";
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 0 0 0 20px;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.rounded:after{
content: "";
float: right;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 0 0 20px 0;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

以上代碼使用shape-outside屬性來實現，同時借助:before和:after偽元素分別實現左邊、右邊的不規則圓角，這種方法可能會導致性能不佳，適用于較小的元素。

以上介紹了兩種不規則圓角矩形的實現方式，主要借助clip-path和shape-outside這兩個屬性，使用時需要注意兼容性問題。