Как создать гладкую изогнутую маску SVG для правого верхнего угла блока? ⇐ CSS

[Anonymous]

Я пытаюсь создать блок с гладким изогнутым вырезом в правом верхнем углу, как на изображении ниже:


На данный момент моя реализация выглядит так:


Как видите, текущая кривая не такая плавная, как хотелось бы. - По сути, это не кривая, а квадрат с прямыми углами. Вот мой текущий код:

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

.curved-block {
width: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
padding: 5px;
}

.curved-block::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #f0f0f0;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h25 c5 0, 10 0, 13 3 s2 7, 2 12 v25 h-40 z' fill='%23000000'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h25 c5 0, 10 0, 13 3 s2 7, 2 12 v25 h-40 z' fill='%23000000'/%3E%3C/svg%3E");
mask-size: cover;
-webkit-mask-size: cover;
}

.icon {
position: absolute;
top: 8px;
right: 8px;
width: 23px;
height: 23px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
background-color: #0056b3;
border-radius: 50%;
color: white;
z-index: 2;
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+

Я изо всех сил пытаюсь добиться более плавной и естественной кривой в маска SVG. Как я могу изменить путь SVG, чтобы создать кривую, которая больше похожа на кривую на желаемом результирующем изображении? Заранее благодарим за ваши предложения.

Подробнее здесь: https://stackoverflow.com/questions/789 ... ght-corner